jquery在mouseleave后继续动画，用mouseenter停止

我需要在mouseleave后在mouseenter和conitnue上停止这个轮播。有人有什么想法吗？我试图添加mouseleave事件，但我在结构中缺少一些东西。我希望有人能帮助我jquery在mouseleave后继续动画，用mouseenter停止

$(document).ready(function() { 
 
$('ul li:even').addClass('even'); 
 
$('ul li:odd').addClass('odd'); 
 
setTimeout(RotateCarousel(), 1500); 
 
}); 
 

 
function RotateCarousel() { 
 
\t 
 
    $("ul li:first-child").animate({ marginLeft: -124 }, 1500, function() { 
 
\t \t 
 
\t \t 
 
     $("ul li:first-child").appendTo('ul'); 
 
     $("ul li:last-child").css('margin-Left', 0); 
 
\t \t  
 

 
\t \t $(".perro").mouseenter(function() { 
 
    \t \t $(".perro").stop(); 
 
\t \t }); 
 

 
\t \t RotateCarousel(); 
 
\t \t 
 
    }); 
 
}

div { width:1080px;overflow:hidden; } 
 
ul { list-style-type:none;width:10000px;margin:0;padding:0; } 
 
li { height:400px;width:108px;float:left;text-align:center;margin:0;padding:0; } 
 
.even {background: #ccc} 
 
.odd {background: #4e4e4e;color:#fff;}

<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Documento sin título</title> 
 
<link href="carutomstyle.css" rel="stylesheet" type="text/css"> 
 
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
 
<script type="text/javascript" src="carujava.js"></script> 
 
</head> 
 

 
<body> 
 
<div> 
 
    <ul> 
 
     <li class="perro">Item #1</li> 
 
     <li class="perro">Item #2</li> 
 
     <li class="perro">Item #3</li> 
 
     <li class="perro">Item #4</li> 
 
     <li class="perro">Item #5</li> 
 
     <li class="perro">Item #6</li> 
 
     <li class="perro">Item #7</li> 
 
     <li class="perro">Item #8</li> 
 
     <li class="perro">Item #9</li> 
 
     <li class="perro">Item #10</li> 
 
     <li class="perro">Item #11</li> 
 
     <li class="perro">Item #12</li> 
 
    </ul> 
 
</div> 
 

 
</body> 
 
</html>

来源

2015-07-19 Tomas Lucena

$(function() { 
 
    var list = $('ul'); 
 
    var perro = $('.perro'); 
 
    
 
    function onAnimate() { \t \t 
 
    $('ul li:first-child').appendTo('ul'); 
 
    $('ul li:last-child').css('margin-Left', 0); 
 
\t \t  
 
    move(); 
 
    } 
 
    
 
    function move() { 
 
    $('ul li:first-child') 
 
     .animate({ marginLeft: -124 }, 1500, onAnimate); 
 
    } 
 
    
 
    list.find('li:even').addClass('even'); 
 
    list.find('li:odd').addClass('odd'); 
 
    
 
    list.on('mouseenter', 'li', function() { 
 
    $('ul li:first-child').stop(); 
 
    }); 
 
    
 
    list.on('mouseleave', move); 
 
    
 
    move(); 
 
});

div { width:1080px;overflow:hidden; } 
 
ul { list-style-type:none;width:10000px;margin:0;padding:0; } 
 
li { height:400px;width:108px;float:left;text-align:center;margin:0;padding:0; } 
 
.even {background: #ccc} 
 
.odd {background: #4e4e4e;color:#fff;}

<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Documento sin título</title> 
 
<link href="carutomstyle.css" rel="stylesheet" type="text/css"> 
 
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
 
<script type="text/javascript" src="carujava.js"></script> 
 
</head> 
 

 
<body> 
 
<div> 
 
    <ul> 
 
     <li class="perro">Item #1</li> 
 
     <li class="perro">Item #2</li> 
 
     <li class="perro">Item #3</li> 
 
     <li class="perro">Item #4</li> 
 
     <li class="perro">Item #5</li> 
 
     <li class="perro">Item #6</li> 
 
     <li class="perro">Item #7</li> 
 
     <li class="perro">Item #8</li> 
 
     <li class="perro">Item #9</li> 
 
     <li class="perro">Item #10</li> 
 
     <li class="perro">Item #11</li> 
 
     <li class="perro">Item #12</li> 
 
    </ul> 
 
</div> 
 

 
</body> 
 
</html>

来源

2015-07-19 11:51:27

谢谢你，伙计！真棒，我的代码太简单了！ –

jquery在mouseleave后继续动画，用mouseenter停止

回答

相关问题