CODEWITHSUNDEEP
javascriptjqueryanimationjquery-animate
ObbyOss
ObbyOss

Reputation: 351

Animate Div to Reveal Div Behind It

EDIT: It was pointed out that I had a syntax error in my original jsFiddle code - it's fixed. That was unintentional and not my question. My question was instead of doing what I do now, how can I animate it so there's a slide animation? Thanks, sorry for the confusion!

I'm trying to build out a quiz where you click on a radio button and a sliding animation occurs that reveals the next question. I tried using .slideToggle but that wasn't working, or at least I could get it to work.

Any ideas? I was trying to stick to regular ole' jQuery instead of UI to save performance.

Here's a jsFiddle of what I have so far. Right now I currently add a class that adds a higher z-index to a div behind another. But I'd like a sliding animation instead.

HTML

<div class="container">
<form id="question1" class="panel">
    <input type="radio" name="test1" value="1">1
    <input type="radio" name="test1" value="2">2
</form>
<form id="question2" class="panel">
    <input type="radio" name="test2" value="3">3
    <input type="radio" name="test2" value="4">4
</form>
</div>

CSS

.container {
    width: 500px;
    height: 500px;
    position: relative;
}

#question1, #question2 {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#question1 {
    z-index: 10;
    background-color: blue;
}

#question2 {
    background-color: red;
}

.z-index20 {
    z-index: 20
}

JS

$('#question1 input').on('change', function() {
    var $questionAnswer1 = $('input[name=test1]:checked', '#question1').val();    
    $("#question2").addClass("z-index20");

    $('#question2 input').on('change', function() {
        var $questionAnswer2 = $('input[name=test2]:checked', '#question2').val(); 
    });
});

Thanks!

Upvotes: 0

Views: 227

Answers (3)

user4639281
user4639281

Reputation:

Try this on for size, we basically just add a transition to the left setting of each question, then move it off canvas.

(Demo)

var handleChange = function (e) {
    e.target.parentNode.style.transition = 'left 1s ease-in-out';
    e.target.parentNode.style.left = '100%';
}
var options = document.querySelectorAll('[id*="question"] input');
for (var i = 0; i < options.length; i++) {
    options[i].addEventListener('change', handleChange, false);
}

The same script with jQuery

(Demo)

var handleChange = function(e) {
    $(e.target.parentNode).css('transition', 'left 1s ease-in-out');
    $(e.target.parentNode).css('left', '100%');
}
$('[id*="question"] input').on('change',handleChange);

Upvotes: 1

Downgoat
Downgoat

Reputation: 14371

Sliding

I would recommend sliding the layer off instead of the second layer on. jQuery also has a very simple and easy way to do this using .animate()

 $('#question1').animate({
    'left': '-510px' // 500 is width of container plus 10px for default margin
}, 200); // Adjust 200

You can add a call back function too:

$('#question1').animate({
    'left': '-510px' // 500 is width of container plus 10px for default margin
}, 200, function () { // Adjust 200
    var questionAnswer = $(this).find('input[name=test2]:checked');
});

JSFiddle

Syntax Error

In your code, your main error is here:

$('#question2 input').on('change', function() {
    var $questionAnswer2 = $('input[name=test2]:checked', '#question2').val();

You need to close this to result in:

$('#question2 input').on('change', function() {
    var $questionAnswer2 = $('input[name=test2]:checked', '#question2').val(); 
});

Small syntax errors such as this can be very troubling (I've noticed almost 400 revisions), luckily you can use sites such as JSHint or a more comprehensive JSLint. This is also integrated in JSFiddle.

Button

Fixed Fiddle

Upvotes: 1

Farzher
Farzher

Reputation: 14593

Your js has syntax errors, so it isn't even running.

Just fix that and you should be good. (Forgot to close first function) Your broken indentation makes it very confusing.

Upvotes: -1

Related Questions