2013-11-22 2 views
1

Это мой код. Здесь div анимируется через 5 секунд и скрывается через 5 секунд. Я должен повторять это каждые 5 секунд. Это означает, что каждые 5 секунд div будет анимироваться и исчезать через 5 секунд.Как повторить div каждую минуту

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
    </script>  
<script type="text/javascript" src="jquery.animate-colors.js"></script> 
<script type="text/javascript" src="jquery.animate-colors.min.js"></script> 
<script> 
$(window).load(function(){ 
    $('#div').delay(5000).fadeIn(function() { 

      $(this).text('Some other text!').css({'text-align':'center',}) 

    }); 

     $("#div").animate({ 

     left:'450px', 
      opacity:'0.5', 
      height:'250px', 
      width:'250px', 
     border:'3px solid', 
     borderColor: 'darkolivegreen', 
     backgroundColor: '#cccc' 
     }) 

    $('#div').delay(5000).fadeOut(); 

    }); 

</script> 
    </head> 
    <body> 

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

    </body> 
    </html> 

ответ

0

Я просто обернуты код в функции "Затемнение", то при загрузке документа, setInterval будет работать каждые 10 секунд.

<script> 

function fader() { 
    $('#div').delay(5000).fadeIn(function() { 
     $(this).text('Some other text!').css({'text-align':'center',}) 
    }); 

    $("#div").animate({ 
     left:'450px', 
     opacity:'0.5', 
     height:'250px', 
     width:'250px', 
     border:'3px solid', 
     borderColor: 'darkolivegreen', 
     backgroundColor: '#cccc' 
    }) 

    $('#div').delay(5000).fadeOut(); 

}; 


$(function() { 
    setInterval(fader,10000); 
}) 

</script> 
+0

Но мне нужно работать в onload ... – user2986106

+0

Последняя часть сценарий будет работать при загрузке. – Alex

2

Вы можете использовать метод setInterval() в javascript.

Резюме

Вызывает функцию или выполняет фрагмент кода повторно, с фиксированной задержкой по времени между каждым вызовом этой функции.

MDN Documentation

+0

Как я могу это сделать в своем коде. вы можете мне помочь ........ – user2986106

0
<div id="blinkText"></div> 

<script> 
// Takes text to blink and id of element to blink text in 
function blinkText(text, id) { 
    // Blink interval 
    setInterval(blinker, 5000); 

    // Flag to see what state text is in (true or false) 
    var flag = true; 

    // Number of times to blink text 
    var blinkNum = 10000; 
    var i = 1; 
//you can select whole div by ajax 
    var divID = document.getElementById(id); 

    function blinker() { 
     if (i < blinkNum) { 
      if (flag) { 
       divID.innerHTML = text; 
       flag = false; 
      } else { 
       divID.innerHTML = ""; 
       flag = true; 
      } 

      i++; 
     } else { 
      // Delete if it's still showing 
      divID.innerHTML = ""; 

      // Stop blinking 
      clearInterval(blinker); 
     } 
    } 
} 

blinkText("Hello World", "blinkText"); 
</script> 
+0

Pls upvote, если его работа .. – uhs

+0

Как я могу использовать это в своем коде .... – user2986106

Смежные вопросы