动画 Div 以揭示其背后的 Div

Question

编辑：有人指出我的原始 jsFiddle 代码中存在语法错误 - 已修复。那是无意的，不是我的问题。我的问题不是做我现在做的事情，而是如何制作动画以便有幻灯片动画？谢谢，抱歉造成混淆！

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

有什么想法吗？我试图坚持使用常规的 ole' jQuery 而不是 UI 以节省性能。

Here's a jsFiddle of what I have so far。现在，我目前添加了一个 class，它将更高的 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

你的js有语法错误，所以连运行都没有。

只要解决这个问题，你就可以了。（忘记关闭第一个功能）你破碎的缩进让人很困惑。

Answer 2

试试这个大小，我们基本上只是在每个问题的左侧设置中添加一个过渡，然后将其关闭 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);
}

与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 3

滑动

我建议滑动层 off 而不是第二层 on。 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 次修订），幸运的是你可以使用 [=17 这样的网站=]。这也集成在 JSFiddle 中。

动画 Div 以揭示其背后的 Div

Animate Div to Reveal Div Behind It

javascript

jquery

animation

jquery-animate

滑动

JSFiddle

语法错误

Fixed Fiddle