Question

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

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

Answer 1

在指定display none之前，您应该等待动画完成，否则display none将立即生效，您将无法看到动画（该元素已被隐藏）。使用animate方法的回调函数，如下所示：

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 animate API

Answer 2

只需使用fadeToggle()

即可实现此效果

$(".frage li").click(function() {
    $(this).find(".antwort").fadeToggle();
    return false;
});

使用jquery进行动画处理然后隐藏元素

2 个答案: