淡出动画答案

【问题标题】：Fade out animation淡出动画
【发布时间】：2014-05-23 13:30:31
【问题描述】：

$("#btn-menu").click(function() {
    $("#btn-dropdown").slideToggle(400, function() {
        $("#btn-dropdown").animate({opacity: "0"})
            ? $("#btn-dropdown").animate({opacity: "100"}, "fast")
            : $("#btn-dropdown").animate({opacity: "0"}, "fast");
    });
});

我有一个 div，我想将 opacity 0 更改为 opacity 100。这样我的 div 就会淡入。但由于某种原因，上面的代码不起作用。它只有在我淡出（从 100 到 0）时才有效！

【问题讨论】：

元素最初是隐藏的，你不能淡入已经存在的东西吗？而且我认为css() 方法不会为任何东西设置动画，那就是animate()
是的，我有#btn-dropdown {opacity: 0}
避免重复$("#btn-dropdown")，因为创建 jQuery 对象包装器的成本很高。将其保存在变量中：var $btnDropdown = $("#btn-dropdown").

标签： jquery jquery-animate fadeout

【解决方案1】：

试试fadeToggle:

$("#btn-dropdown").fadeToggle("fast");

【讨论】：

【解决方案2】：

问题出在这部分

$("#btn-dropdown").css({opacity: "0"}) ? ... : ...;

这设置 #btn-dropdown 的opacity 为0。它不会获取元素不透明度的值。相反，你想要做的是：

+$("#btn-dropdown").css('opacity') ? ... : ...;

这会提取当前的opacity 值（并使用一元加号确保它是数字的（因为0 等同于false）。

替代解决方案

另一种解决方案是引入一些 CSS：

.hidden {
    opacity: 0;
    transition: 0.1s;
}

然后只需使用jQuery's toggleClass method 来添加或删除类：

$("#btn-dropdown").slideToggle(400, function() {
    $("#btn-dropdown").toggleClass('hidden');
});

【讨论】：