Question

我有点困惑，似乎无法将必要的google fu拉到一起来追踪这一点。我有一个answer__get-the-answer类的标签。当用户点击标签时，div应该设置为动画，显示答案

$('.answer__get-the-answer').on('click', function (e) {
    e.preventDefault();

    var par = $(this).parent();

    if ( !par.hasClass('selected') ) {
        par
            .addClass('selected')
            .find('.answer__inside')
                .slideDown(500);
    }
});

如果我在控制台和放大器中通过jQuery选择答案执行slideDown，它会动画。如果我将slideDown包装在一个延迟1ms的setTimeout函数中，则slideDown动画。但是当我执行这段代码时，它没有动画。什么可能导致这个？

Answer 1

我不明白为什么这不起作用。但我做到了这一点，我希望它能做到你想要的。

HTML：

<div class="question"> <a class="getanswer">Show me the answer!</a>
    <div class="answer" style="display:none">Pi... The solution to everything.</div>
</div>

JS / jQuery：

$('.getanswer').on('click', function () {
    var answer = $(this).parent().find(".answer");
    if(!answer.hasClass("selected")){
        answer.slideDown(500);
        answer.addClass("selected");
    }
});

这是有效的，我测试了它。

我认为问题在于par不是.answer__get-the-answer的父级。如果您也可以发布HTML，我可以尝试找出问题。

到目前为止，我做了这个小提琴：JSFiddle

jQuery动画 - 没有正确动画

1 个答案: