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

4

4 回答 4

2

尝试：示例

$("#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);;
});
于 2013-03-09T05:13:46.960 回答
0

尝试

$(".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/

于 2013-03-09T04:48:47.250 回答
0

你在做什么如下。

$("#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>
于 2013-03-09T05:07:46.970 回答
0

这是您要找的 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
}

在这里提琴

于 2013-03-09T05:15:39.770 回答