Question

<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'功能吗？

Answer 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);;
});

Answer 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/

Answer 3

您正在做的事情如下。

$("#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>

Answer 4

这是你在找什么？

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

如何让这个动画div在一个按钮中返回？

4 个答案: