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

이 작업을 수행 할 수 있습니다 JS 코드에 대한 필요가 여기에있다

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

없습니다, 당신은 당신이 혼자 CSS를 사용하여 무슨 일을하는지 달성 할 수 @keyframes 및 animation. 이 시도 :

#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

당신은 더 콜백 함수에이 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

나는 위의 JQuery와에

window.setInterval(animateMydiv, 9000); 

를 사용하여 이것에 대한 대답을 얻었다 .. !!