ルーピングjQuery関数

jQueryで作成された小さなアニメーションがあります（パネルが上がったり下がったりします）。しかし、私はそれをループにすることはできません。だからそれはやり続けます。ここでのコードは、これまでのところです：ルーピングjQuery関数

$(document).ready(function() { 

    startAni(); 

}); 

function startAni() { 
    setTimeout(function() { 
     $('.ani .panels').animate({ 
      top: '-350px', 
     }, 2500, function() { 
      setTimeout(function() { 
       $('.ani .panels').animate({ 
        top: '0px', 
       }, 2500, function() { 
       }); 
      }, 1000); 
     }); 
    }, 1000); 


    //startAni(); 
}

だから、一度完璧に動作します（パネルのdivは、上がる1秒のためにそこにとどまり、その後ダウン戻ってくるどのように私は同じ関数を呼び出す試みたループにしてこれを変更することができます。？関数の内部が、それだけで、それを殺した：！/

おかげ

出典

2012-01-10 user995317

使用[たsetInterval（http://www.w3schools.com/jsref/met_win_setinterval.asp）。 – Sjoerd

この例では、動作：

ここで

http://jsbin.com/esaraj/4/edit#javascript,html,live

function startAni() { 
      $('.ani .panels').animate 
      (
      {top: '250px'}, 2500, function(){ 
setTimeout( 
       function() {               $('.ani .panels').animate 
(
{top: '0px'}, 2500, function() 
{ 
startAni(); 
} 
);},2500);});} 


      $(function() 
    { 

    startAni(); 

}

出典

2012-01-10 16:10:33 netadictos

これといくつかの変更を行いました。どうも！ – user995317

var time = 1000; //time between loops 
$(document).ready(function() { 

    var interval = setInterval('startAni()',time); 

});

出典

2012-01-10 15:30:42

これは何もしません...うーん。たぶん私は何かが欠けているでしょう。 – user995317

あなたはstartAni（）関数を含みますか？あなたはどんなリンクを提供することができますか？ –

をごsetIntervalを使用するなど、あなたの関数を書き換える必要があります。

$(document).ready(function() { 

    //interval = 2500ms + 2500ms = sum of all animation steps 
    var interval = 5000; 
    var looping = setInterval(startAni, interval); 
    startAni(); //starts animation right away 
}); 

function startAni() { 
    $('.ani .panels').animate({ 
      top: '-350px', 
     }, 2500, function() { 
      $('.ani .panels').animate({ 
       top: '0px', 
      }, 2500); 
     } 
    }); 
}

私は別の1つの

UPDを書くことにしたように、元のFUNCでの

変更は、前の答えで言及されませんでした。

$(document).ready(function() { 
    //interval = 2500ms + 2500ms = sum of all animation steps 
    var interval = 5000; 
    var looping = setInterval(startAni, interval); 
    startAni(); 
}); 

function startAni() { 

    var animating = false; 
    $('.ani .panels').animate({ 
      top: '+50px', 
     }, 2500, function() { 
      // the callback tries to run for every item in '.ani .panels' 
      // we need it to run only once 
      if(!animating){ 
       animating = true; 
       $('.ani .panels').animate({ 
        top: '0px', 
       }, 2500, function() { 
        // reset flag for a single callback instance invocation 
        animating=false; 
       }); 
      } 
     } 
    );

：あなたは ".ani .panels"に複数の項目がある場合は、代わりのようなもので行く必要があります

}

the working fiddle

出典

2012-01-10 15:59:38 akoptsov

これらはほとんど機能しますが、パネルは上下に数秒間停止する必要があります。したがって、私のオリジナルのタイムアウト。 – user995317

htmlコードによる自動ループ機能。私はこれが誰かにとって役に立つかもしれないことを願っています。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
position: relative; 
background-color: #abc; 
width: 40px; 
height: 40px; 
float: left; 
margin: 5px; 
} 
</style> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
<p><button id="go">Run »</button></p> 
<div class="block"></div> 
<script> 

function test() { 
$(".block").animate({left: "+=50", opacity: 1}, 500); 
    setTimeout(mycode, 2000); 
}; 
$("#go").click(function(){ 
test(); 
}); 
</script> 
</body> 
</html>

フィドル：DEMO

出典

2013-02-19 13:01:32 Selvamani

ルーピングjQuery関数

答えて

関連する問題