Question

我有一个正在执行的点击功能，因为fadeToggles有效。但是我试图制作动画的div＃overlay-sources不是动画。我已经设置了一个0px的高度开始，然后它应该被动画为480px。动画本身有效，我在切换功能之外进行了测试。但不知何故，切换功能未执行。

$("#button-up").click(function(){
    $("#overlay-sources").toggle(
        function()
        {
          $(this).animate({height: "480px"}, 500);
        },
        function()
        {
          $(this).animate({height: "0px"}, 500);
        });

    $("#overlay-sources").fadeToggle('fast');
    $("#blackout").fadeToggle('fast');
});

Answer 1

如果您不反对jQueryUI，或者已经包含它，那么整个顶部：

$("#overlay-sources").toggle(
        function()
        {
          $(this).animate({height: "480px"}, 500);
        },
        function()
        {
          $(this).animate({height: "0px"}, 500);
        });

变为：

$("#overlay-sources").slideToggle(500);

但是不要将CSS的高度设置为0，只需要display:none，该函数将处理高度动画。

修改

对不起，我弄错了。看起来slideToggle是jQuery核心库的一部分，并且不需要jQuery UI

Answer 2

这就是我需要的。

$("#button-up").toggle(
    function()
    {
        $("#overlay-sources").animate({top: "141px"}, 500);
        $("#blackout").fadeToggle('fast');
    },
    function()
    {
        $("#overlay-sources").animate({top: "690px"}, 500);
        $("#blackout").fadeToggle('fast');
    }
);

切换未执行

2 个答案: