Question

我正在处理带有无限循环的jQuery动画，我的代码如下：

var width = $(document).width() - $('#mydiv').width();
$(document).ready(function() {
  function animateMydiv() {
    $('#mydiv').animate({
        'left': width + 'px'
      }, 9000,

      function() {
        $('#test').css({
          opacity: 1.0,
          visibility: "visible"
        }, 9000).animate({
          opacity: 0
        }, 9000);
      }).animate({
      'left': '0px'
    }, 9000);
  }

  animateMydiv();
});

#mydiv {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  background: black;
}
#test {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 50;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv"></div>
<p id="test">
  Hi welcome...!!
</p>

我使用animateMydiv()来循环无限但它不起作用。

Answer 1

这里不需要JS代码，您可以使用@keyframes和animation单独使用CSS来实现目标。试试这个：

#mydiv {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  background: black;
  animation: slider 9s infinite; 
}
#test {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 50;
  animation: blinker 9s infinite; 
}
@keyframes slider {
  0% { left: 0; }
  50% { left: 95%; }
  100% { left: 0; }
}
@keyframes blinker {
  50% { opacity: 0; }
  55% { opacity: 1; }
  100% { opacity: 0; }
}

<div id="mydiv"></div>
<p id="test">
  Hi welcome...!!
</p>

Answer 2

你可以这样做：

function animateMydiv() {
    $('#mydiv').animate({'left': width + 'px'}, 9000, function(){
        $('#test').css({opacity:1.0, visibility:"visible"}, 9000).animate({opacity: 0}, 9000);
    }).animate({'left': '0px'}, 9000, animateMydiv); 
}

DEMO

Answer 3

var width = $(document).width() - $('#mydiv').width();
$(document).ready(function() {
  function animateMydiv() {
    $('#mydiv').animate({
        'left': width + 'px'
      }, 9000,

      function() {
        $('#test').css({
          opacity: 1.0,
          visibility: "visible"
        }, 9000).animate({
          opacity: 0
        }, 9000);
      }).animate({
      'left': '0px'
    }, 9000);
window.setTimeout(animateMydiv, 100);
  }

  window.setTimeout(animateMydiv, 100);
});

#mydiv {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  background: black;
}
#test {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 50;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv"></div>
<p id="test">
  Hi welcome...!!
</p>

Answer 4

您可以对同一个函数使用回调函数，可以在here找到更多关于回调函数的函数。这是demo。

var width = $(document).width() - $('#mydiv').width();
$(document).ready(function() {
    function animateMydiv() {
        $('#mydiv').animate({
                'left': width + 'px'
            }, 9000,

            function() {
                $('#test').css({
                    opacity: 1.0,
                    visibility: "visible"
                }, 9000).animate({
                    opacity: 0
                }, 9000);
            }).animate({
            'left': '0px'
        }, 9000,animateMydiv);
    }
    animateMydiv();
});

#mydiv
{
width:40px;
height:40px;
position:absolute;
left:0; 
background: black;
}

#test
{
 visibility: hidden;
 position:absolute;
 left:0;
 top:50;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>

<div id="mydiv">  
</div>
<p id="test">
Hi welcome...!!
</p>

Answer 5

我使用

得到了答案

window.setInterval(animateMydiv, 9000);

在上面的jquery .. !!

如何在jQuery中创建无限循环？

5 个答案: