не получается зациклить анимацию на jquery

fafee

fafee

Постоялец
Регистрация
3 Окт 2008
Сообщения
92
Реакции
0
не получается зациклить функцию, может быть в jquery есть какие-то специальные способы вроде loop или тп?
для примера - кусочек простого кода - зеленый блок появляется и через некоторое время исчезает.
HTML: 
<style>
#green {
width:100px;
height:100px; 
background-color:#006600;
display:none;
}
</style>
<script src="jquery.js"></script> 
<script type="text/javascript">
for (i = 0; i < 5; i++) {
$("#green").fadeIn(1000);
setTimeout(
function() 
      { 
           $("#green").fadeOut(1000);
      }, 1000);	
}
</script>
<div id="green"></div>
цикл отрабатывает вместо пяти, всего один раз.
как сделать чтобы отработал пять раз или бесконечно?

не важно средствами js или jquery

спасибо
 
можно просто
Код: 
$("#green").fadeIn(1000).fadeOut(1000).fadeIn(1000).fadeOut(1000);
Или использовать callback для функции fadeOut, и запускать опять fadeIn.

HTML: 
<!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">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Repeat</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
    function fade(block_id, time, itr){
        //заканчиваем
        if(itr<=0)return false;
        //делаем fadeIn и fadeOut
        $(block_id).fadeIn(time).fadeOut(time, function() {
            //минусуем счётчик и запускаем опять себя
            fade(block_id, time, itr-1);
        });
    }
    
    $(document).ready(function(){
        //fadeIn+fadeOut 5 раз
        fade("#green", 300, 5);
    });
    </script>

<style>
#green {
    width:100px;
    height:100px; 
    background-color:#006600;
    display:none;
}
</style>

</head>

<body>
    <div id="green"></div>
</body>
</html>
 
HTML: 
<style>
#green {
width:100px;
height:100px;
background-color:#006600;
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div id="green"></div>
<script type="text/javascript">
for (i = 0; i < 50; i++) {
$("#green").fadeToggle(1000);
}
</script>
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху