0

我正在使用它来显示 .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;
    });
});
4

2 回答 2

2

这种效果可以简单地使用fadeToggle()

$(".frage li").click(function() {
    $(this).find(".antwort").fadeToggle();
    return false;
});
于 2013-10-10T15:05:25.903 回答
2

您应该等待动画完成，然后再分配显示无，否则显示无将立即生效，您将无法看到动画（元素已隐藏）。使用 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 动画 API

于 2013-10-10T15:15:13.277 回答