jQuery 애니메이션 일시 중지 : 다른 div의 시작 이벤트 사용.

외부 div 위로 마우스를 가져 가면 div에 jQuery.animate 함수를 일시 중지 할 수 없다는 문제가 있습니다. 내가 바깥 쪽 div의 호버 위에서 멈추고 싶어하는 이유는 바깥 쪽 div와 안쪽 div가 겹칠 것입니다. 그런 다음 마우스가 바깥 쪽 div를 떠날 때 안쪽 div에서 애니메이션을 다시 시작하길 원합니다. 어떤 도움을 크게 지금 동안 jQuery 애니메이션 일시 중지 : 다른 div의 시작 이벤트 사용.

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>jQuery Practice</title> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 
    $("#listSlide ul").animate({marginTop:-800},10000, 'linear', function(){ 
     $(this).find("li:last").after($(this).find("li:first")); 
     $(this).css({marginTop:-73}); 
    }) 
}); 

</script>

가 어떻게 외부 DIV 년대에 일시 정지 기능을 애니메이션 JQuery와 위 얻을 수 있습니다 .... 조금 여기 갇혀, 감상 할 수있다 (#animation) 마우스 호버 이벤트 및 이력서 #animation div의 마우스 만 남았습니까?

<style type="text/css"> 

* { 
    padding:0px; 
    margin:0px; 
} 

#wrapper { 
    width:960px; 
    height:768px; 
    margin: 0 auto; 
} 

#animation { 
    width:260px; 
    height:768px; 
    float:right; 
    position:relative; 
} 

#listSlide { 
    height: 768px; 
    width:200px; 
    position:absolute; 
    left:49px; 
    overflow:hidden; 
} 

#listSlide ul { 
    height: 700px; 
} 

#listSlide ul li { 
    width:185px; 
    text-align: center; 
    height: 768px; 
    list-style: none; 
    float: left; 
    clear: left; 
    margin-bottom:-40px; 
} 
</style> 

</head> 

<body> 

<div id="wrapper"> 

    <div id-"animation"> 

     <div id="listSlide"> 
      <ul> 
       <li><img src="images/belt.png" alt="Belt 1" /></li> 
       <li><img src="images/belt.png" alt="Belt 2" /></li> 
       <li><img src="images/belt.png" alt="Belt 3" /></li> 
       <li><img src="images/belt.png" alt="Belt 4" /></li> 
      </ul> 
     </div> 

    </div> 

</div> 

</body> 

</html>

출처

2012-12-18 Dwain Maxwell

http://stackoverflow.com/questions/5586068/jquery-pause-resume-animat e – joequincy

다른 사람들이 문제를 해결할 수 있도록 데모 (http://jsfiddle.net)를 설정하십시오. – JSuar

jsBin demo

오타 = <div id="animation">
및 이상 #animate의 CSS

JQ에서 float:right;을 제거 <div id-"animation"> :

$(document).ready(function(){ 

    function anim(){ 

    $("#listSlide ul").animate({marginTop:-800},10000, 'linear', function(){ 
     $(this).find("li:last").after($(this).find("li:first")); 
    }); 

    } 
    anim(); // initial kick 

    $('#animation').on('mouseenter mouseleave',function(e){ 
    var mEnter = e.type=='mouseenter' ? // if 
     $("#listSlide ul").stop(1) : // is mouseenter (STOP!) 
           anim() ; // is mouseleave (ANIM!) 
    }); 

});

출처

2012-12-18 02:04:00

빠른 답장을 보내 주셔서 감사합니다. 현재 코드를 작동 시켰 습니다만, 마우스를 올렸을 때 (mouseenter, mouseleave) 3-5 번 애니메이션이 느리게 시작되면 일관된 속도를 유지하지 못하는 이유가 있습니까? –

@DwainMaxwell 이런 식으로 뭔가? http://jsbin.com/udinaj/6/edit하지만 (현재 특정 위치에서 멈추지 않고 있지만 ...) 나는 왜 당신이'$ (this) .find()를 사용하는지 모르겠다. "li : last"). after ($ (this) .find ("li : first")); –

jQuery 애니메이션 일시 중지 : 다른 div의 시작 이벤트 사용.

답변

관련 문제