Question

我试图将div标签设置为300px，3秒后将隐藏，我希望每8秒执行一次整个过程。在我的代码中它只做一次。它并没有重复整个过程。以下是我的代码。

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">    </script>
<script> 
$(document).ready(function(){
window.setInterval(function(){
var div=$("div");
div.animate({left:'300px'},"slow");
setTimeout(function(){
div.animate({opacity:'0'},"slow"); }, 3000);

},8000);
});
</script> 
</head>

<body>

    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    </div>

</body>
</html>

Answer 1

$(document).ready(function(){

    (function moveit(){
        $("div")
            .css({opacity:'1',left:0})// reset (assuming you want it back visible and on the left)
            .animate({left:'300px'},"slow")// move right
            .delay(3000)// wait 3 seconds
            .animate({opacity:'0'},"slow");// fade out
        setTimeout(moveit, 8000);//do this again after 8 seconds
    })(); // self-execute.

});

http://jsfiddle.net/99phku9d/

Answer 2

您可以使用jQuery repeat功能：

$(document).ready(function(){
   $("div").repeat(8000).animate({left:'300px'},"slow").setTimeout(function(){
   div.animate({opacity:'0'},"slow"); }, 3000);

});

动画div标签并在cearten时间之后使用jquery隐藏它

2 个答案: