1

如何制作倒车动画.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消失了。

4

2 回答 2

4

您不需要切换中的“单击”事件。.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，因为它不再支持这两个功能。好的和有效的观点。

于 2013-05-20T01:23:40.897 回答
2

尝试这个：-

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

演示

$("#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.
});
于 2013-05-20T01:42:11.613 回答