动画Div显示背后的Div

Question

编辑：有人指出我的原始jsFiddle代码中存在语法错误 - 它已修复。那是无意的，不是我的问题。我的问题不是做我现在做的事情，我怎么能动画它所以有幻灯片动画？谢谢，抱歉混乱！

我正在尝试构建一个测验，点击一个单选按钮，然后会出现一个滑动动画，显示下一个问题。我尝试使用.slideToggle，但这不起作用，或者至少我可以让它工作。

有什么想法吗？我试图坚持使用常规的'jQuery而不是UI来保存性能。

Here's a jsFiddle of what I have so far。现在我正在添加一个类，它将更高的z-index添加到另一个后面的div。但我想要一个滑动动画。

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(); 
    });
});

谢谢！

Answer 1

尝试使用此尺寸，我们基本上只是在每个问题的左侧设置中添加一个过渡，然后将其从画布上移开。

（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);
}

与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);

Answer 2

滑动

我建议在上滑动图层 off 而不是第二层。 jQuery还有一个非常使用.animate()

执行此操作的简单方法

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

您也可以添加回叫功能：

$('#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

语法错误

在您的代码中，您的主要错误在于：

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

你需要关闭它才能产生：

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

这样的小语法错误可能非常令人不安（我注意到近400次修订），幸运的是，您可以使用 JSHint 等网站或更全面的 JSLint 。这也集成在JSFiddle中。

<小时/>

Fixed Fiddle

Answer 3

你的js有语法错误，所以它甚至没有运行。

要解决这个问题，你应该做得很好。 （忘了关闭第一个功能） 你破损的缩进使它非常混乱。