Question

我需要在mouseenter上停止这个旋转木马并在mouseleave之后继续旋转。有人有什么想法吗？我试图添加mouseleave事件，但我在结构中遗漏了一些东西。我希望有人可以帮助我

$( document ).ready(function() {
$('ul li:even').addClass('even');
$('ul li:odd').addClass('odd');
setTimeout(RotateCarousel(), 1500);
});

function RotateCarousel() {
	 
    $("ul li:first-child").animate({ marginLeft: -124  }, 1500, function () {
		
		
        $("ul li:first-child").appendTo('ul');
        $("ul li:last-child").css('margin-Left', 0);
		    

		 $(".perro" ).mouseenter(function() {
 		 $(".perro" ).stop();
		 });

		 RotateCarousel();
		 
    });
}

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>

Answer 1

$(function() {
  var list = $('ul');
  var perro = $('.perro');
  
  function onAnimate() {		
    $('ul li:first-child').appendTo('ul');
    $('ul li:last-child').css('margin-Left', 0);
		    
    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>

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

1 个答案: