使用jQuery进行动画处理然后隐藏元素 [英] Using jquery to animate then hide element

问题描述

我正在使用它显示.antwort并将动画应用于其不透明度.这很好.但是，再次单击时，.antwort会立即隐藏，没有任何动画.我在做什么错了?

I'm using this to display .antwort and apply an animation to its opacity. This works fine. However, when clicking again .antwort is hidden immediately without any animation. What am I doing wrong?

jQuery(document).ready(function ($) {
    $(".frage li").click(function () {
        if (!$(this).find(".antwort").is(".open")) {
            $(this).find(".antwort").css({
                display: "block"
            });
            $(this).find(".antwort").animate({
                opacity: 1
            }, 1500).addClass('open');
        } else {
            $(this).find(".antwort").animate({
                opacity: 0
            }, 1500).removeClass('open');
            $(this).find(".antwort").css({
                display: "none"
            });
        }
        return false;
    });
});

推荐答案

在不分配显示内容之前，您应等待动画完成，否则显示内容将立即生效并且您将无法看到动画(该元素已被隐藏). 使用animate方法的回调函数，如下所示:

You should wait for the animation to be completed, before assigning the display none, otherwise the display none will take effect immediately and you won't be able to see the animation (the element is already hidden). Use the callback function of the animate method, like this:

jQuery(document).ready(function ($) {
    $(".frage li").click(function () {
        if (!$(this).find(".antwort").is(".open")) {
            $(this).find(".antwort").css({
                display: "block"
            });
            $(this).find(".antwort").animate({
                opacity: 1
            }, 1500).addClass('open');
        } else {
            $(this).find(".antwort").animate({
                opacity: 0
            }, 1500, function() {
               // Animation complete.
               $(this).hide()
            }).removeClass('open');
        }
        return false;
    });
});

参考: jQuery动画API

这篇关于使用jQuery进行动画处理然后隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！