淡出动画

Question

$("#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，我想从不透明度0更改为不透明度100.因此我的div淡入。但由于某些原因，上面的代码将无效。它只有在我淡出时才会起作用（从100到0）！

Answer 1

尝试fadeToggle：

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

Answer 2

问题在于这部分

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

此将opacity的{​​{1}}设置为0.它不会获取元素的不透明度值。相反，你想要做的是：

#btn-dropdown

这会拉出当前的+$("#btn-dropdown").css('opacity') ? ... : ...; 值（并使用一元加号确保它是数字的（因为opacity相当于0））。

替代解决方案

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

false

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

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