jQueryで無限ループを作成する方法は？

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

：

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 2

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 3

JSコードの必要はここにありませんが、あなたが使って一人でCSSを使ってやっているものを達成することができます@keyframesおよびanimation。あなたは、コールバック関数の詳細はhereを見つけることができ、同じ関数にコールバック関数を使用することができます

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

：これを試してみてください。ここには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

は、私は上記のjqueryので

window.setInterval(animateMydiv, 9000); 

を使用して、このための答えを得ました..！