Question

这是我的代码。这里div在5秒后动画，并在5秒后隐藏。我需要每5秒重复一次。这意味着每隔5秒，div就会生成动画并在5秒后消失。

 <!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>

Answer 1

您可以在javascript中使用setInterval（）方法。

摘要

使用固定的方法重复调用函数或执行代码片段   每次调用该函数之间的时间延迟。

MDN Documentation

Answer 2

<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>

Answer 3

我刚刚将代码包装在“fader”函数中，然后在文档加载时，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>

如何在每分钟重复一次div

3 个答案: