如何使用 .toggle 功能？

Question

如何用.animate制作倒车动画？ 我在其他地方读到了函数.toggle，但是当我使用它时，这个函数会自动启动而无需“点击”。我希望它（功能）仅在我（或用户）单击它时才开始。

$(document).ready(function(){
    $("#dae").toggle(
        function(){
            $("#dae").click(function(){
                $("#dae").animate({left:'50px', top:'100px'}, "slow");
                $("#dae").animate({opacity:0.1}, "slow");
                $("#dae").animate({opacity:1.0}, "slow");
            });
        }, function(){
            $("#dae").click(function(){
                $("#dae").animate({opacity:1.0}, "slow");
                $("#dae").animate({opacity:0.1}, "slow");
                $("#dae").animate({left:'10px', top:'20px'}, "slow");
            });
        }
    )
});

问题是：当浏览器启动时，div 消失了。

Answer 1

您不需要切换中的“点击”事件。 .toggle() 基于点击事件。

所以这样设置：

$("#dae").toggle(
    function(){

            $(this).animate({left:'50px', top:'100px'}, "slow");
            $(this).animate({opacity:0.1}, "slow");
            $(this).animate({opacity:1.0}, "slow");

    }, function(){

            $(this).animate({opacity:1.0}, "slow");
            $(this).animate({opacity:0.1}, "slow");
            $(this).animate({left:'10px', top:'20px'}, "slow");

    }
)

试试上面的方法，看看它对你有用。如果您有任何问题，请告诉我。

编辑：请注意，如下所示，这在较新的版本中不起作用。的 jquery，因为它不再支持这两个功能。好的和有效的观点。

Answer 2

试试这个：-

我不确定您使用的是哪个 jquery 版本，但 .toggle() 不再需要 2 个回调。此外，您需要在单击而不是执行切换时执行此操作，这就是您看到它最初自己执行的原因。

Demo

$("#dae").click(function(){
    var $this = $(this);
    if ($this.is('.animate')) //Just add this class to detect the state.
    {
       
            $this.animate({left:'50px', top:'100px'}, "slow")
             .animate({opacity:0.1}, "slow")
             .animate({opacity:1.0}, "slow");
     }
    else
    {
         $this.animate({opacity:1.0}, "slow")
         .animate({opacity:0.1}, "slow")
         .animate({left:'10px', top:'20px'}, "slow");
    }
   $this.toggleClass('animate'); //add/remove class based on its previous state.
});