如何让这个动画 div 一键返回？答案

【问题标题】：How can I make this animated div returning in one button?如何让这个动画 div 一键返回？
【发布时间】：2013-02-24 18:43:08
【问题描述】：

<script>
$("#right").click(function(){
  $(".block").animate({"left": "+100px"}, "slow").fadeTo("slow", 0.33);
});

$("#left").click(function(){
  $(".block").animate({"left": "+50px"}, "slow").fadeTo("slow", 0.99);;
});
</script>

这是我的脚本。如您所见，我想使用按钮将 .block 向左和向右移动，但我找不到如何使其在一个按钮中工作。

所以我希望按钮触发 .block 向右移动（在第一次单击时），在它移动后，触发 .block 向左移动（第二次单击）。并且可以反复工作。

我该怎么做？我应该使用'if'函数吗？

【问题讨论】：

有;;在左键点击结束时..

标签： jquery animation jquery-animate

【解决方案1】：

试试：Sample

$("#right").click(function () {
   if (!$(".block").hasClass("Moved")) {
       $(".block").animate({
           "left": "+100px"
       }, "slow").fadeTo("slow", 0.33).addClass("Moved");
   } else {
       $(".block").animate({
           "left": "+50px"
       }, "slow").fadeTo("slow", 0.99).removeClass("Moved");
   }
});

另一种选择：

使用这样的小插件；

(function($) {
    $.fn.clickToggle = function(func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function() {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
}(jQuery));

并像在页面中的任何位置一样使用它：

$("#right").clickToggle(function () {
    $(".block").animate({
        "left": "+100px"
    }, "slow").fadeTo("slow", 0.33);
}, function () {
    $(".block").animate({
        "left": "+50px"
    }, "slow").fadeTo("slow", 0.99);;
});

【讨论】：

【解决方案2】：

试试

$(".left").toggle(function(){
    $(".block").animate({"left": "+100px"}, "slow").fadeTo("slow", 0.33);
}, function(){
    $(".block").animate({"left": "+50px"}, "slow").fadeTo("slow", 0.99);
});

您可以在此处阅读有关 .toggle() 的更多信息：http://api.jquery.com/toggle-event/

【讨论】：

您正在使用的.toggle() 已从 jQuery 1.9 中删除

【解决方案3】：

这是你要找的qhat吗？

HTML：

<div class="block"></div>
<button type="button" id="move">Move</button>

jQuery:

$("#move").click(function () {
    $(".block").animate({
        left: "+100px"
    }, "slow")
        .animate({
        opacity: 0.33
    }, "slow")
        .animate({
        left: "+50px"
    }, "slow")
        .animate({
        opacity: 0.99
    }, "slow");
});

CSS：

.block {
    background: blue;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
}
#move {
    margin-top: 150px
}

小提琴here

【讨论】：

谢谢，但这个效果不是我试图找到的……但还是谢谢你！

【解决方案4】：

你正在做的事情如下。

$("#right").click(function(){
  $(".block").animate({"left": "+100px"}, "slow").fadeTo("slow", 0.33);
});

$("#left").click(function(){
  $(".block").animate({"left": "+50px"}, "slow").fadeTo("slow", 0.99);;
});

每次单击左或右时，都会增加左属性，这意味着不存在右移动动画代码。

同时从左键单击事件代码中删除;;。

试试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>StackOverFlow</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function()
        {
            $("#right").click(function(){
                 $(".block").animate({
                    left: "100px"
                }, 1500 );
            });

            $("#left").click(function(){
                $(".block").animate({
                    left: "0"
                }, 1500 );
            });
        });
    </script>
</head>
<body>

<div>
<button id="left" type="button">Left</button>
<button id="right" type="button">Right</button>
</div>

<div class="block" style="border:1px solid red;width:100px;height:100px;position: absolute;"></div>

</body>
</html>

【讨论】：