Question

嘿，我有一个滑块，徽标从右侧滑到左侧。现在我想让它从右到左重新开始（不要从左到右！）。

我该怎么做？我是jQuery的新手

这是我的代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animate demo</title>
<style>
#background {
width:980px;
height:75px;
background-color:#abc;
}
#logo1 {
position:absolute;
width:234px;
height:40px;
margin:17px 0px 0px 700px;
background-image:url(bru.png);
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="background">
<div id="logo1" class="right"></div>
<script>
$(".right").ready(function() {
$("#logo1").animate({"left":"-=600px"},10000);
});
</script>
</div>
</body>
</html>

Answer 1

这只是对它的快速刺杀，但这有什么意义呢？

http://jsfiddle.net/wrxsti85/CzyCr/

使用具有隐藏溢出的父级的相对位置：

var loop = function(){
    $("#logo1").animate({"left":"-=1300px"},10000, function(){
        $('#logo1').css({'left':'1000px'});
        loop();
    });
};

loop();

希望这有帮助！

Answer 2

如果您希望它只出现一次，请将其置于第一个动画

之后

JAVASCRIPT：OCCUR ONCE

$(".right").ready(function() {
    $("#logo1").animate({"left":"-=600px"}, 10000);
    $("#logo1").animate({"left":"+=600px"}, 10000);
});

如果你想让它不断循环......

JAVASCRIPT：REPEAT

$(".right").ready(function() {
    var left = function () {
        $("#logo1").animate({"left":"-=600px"}, 10000);
        right();
    }
    var right = function () {
        $("#logo1").animate({"left":"+=600px"}, 10000);
        left();
    }
    left();
});

Answer 3

<script>
    $(".right").ready(function() {
        /* animation F definition*/
        var animate = function(cb){
            $("#logo1").animate({"left":"-=600px"}/*properties end values*/,
                                  1000 /* duration */,
                                  function()/* on complete F*/{
                                      this.style.left = 0; /* reset style properties */
                                          if(cb&&cb.call){
                                              cb(animate); /* call animation again */
                                          }
                                  })
        };
        /* First call */
        animate(animate);
    });
</script>

只需定义动画功能，并在动画完成后回调中调用它。这将循环它。

jQuery滑块循环？

3 个答案: