. 겹쳐서 반복 애니메이션이 발생하고 있습니까?

Question

나는 검색하고 있었고, 난 우리가 이미지 위에 마우스를 가져 가면 어떻게 애니메이션을 좋아하는이 사이트를

http://www.toybox.co.nz/

을 보았다. 크롬에서만 작동하기 때문에 코드를 작성하기로 결정했습니다. 다음은

이 내 CSS 부분

.clubsevent{ 
    height:50px; 
    width: 100px; 
    opacity:1; 
    position: absolute; 
    } 
    #cepheid{ 
    top:100px; 
    left:100px; 
    background: #6600FF; 
    } 
    #endeavour{ 
    top:100px; 
    left:210px; 
    background: #FF0000; 
    } 
    #electronika{ 
    top:100px; 
    left:320px; 
    background: #6600FF; 
    } 
    #e-cell{ 
    top:100px; 
    left:430px; 
    background: #6600FF; 
    } 
    #infero{ 
    top:160px; 
    left:100px; 
    background: #6600FF; 
    } 
    #informals{ 
    top:160px; 
    left:210px; 
    background: #6600FF; 
    } 
    #kludge{ 
    top:160px; 
    left:320px; 
    background: #6600FF; 
    } 
    #robotics{ 
    top:160px; 
    left:430px; 
    background: #6600FF; 
    } 
    #torque{ 
    top:220px; 
    left:100px; 
    background: #6600FF; 
    } 

내 코드

var len,i,hoverindex,flag=0; 
    $(function(){ 
    len = $(".clubsevent").length; 
    $(".clubsevent").hoverIntent(function(){ 
     if(flag==0){ 
     flag=1; 
      hoverindex= $(".clubsevent").index(this); 
    $(".clubsevent").eq(hoverindex).css('z-index',2); 
    for(i=0;i<len;i++){ 
     if(i!=hoverindex){ 
     var rand=Math.random(); 
     var elemheight =rand*parseInt($(".clubsevent").eq(i).css('height')); 
     var elemwidth =rand*parseInt($(".clubsevent").eq(i).css('width')); 
     var elemleft = Math.random()*250; 
     var elemtop = Math.random()*250; 
     var elemopacity = Math.random()*.6; 
     $(".clubsevent").eq(i).animate({ 
      left:elemleft, 
      top:elemtop, 
      height:elemheight, 
      width:elemwidth, 
      opacity:elemopacity, 
     },250); 
     } 

    } 

     } 


    },function(){ 
     if(flag==1){ 
      flag=0; 
      for(i=0;i<len;i++){ 
     var elemheight =50; 
     var elemwidth =100; 
     var elemleft = $(".clubsevent").eq(i).attr('left'); 
     var elemtop = $(".clubsevent").eq(i).attr('top'); 
     var elemopacity = 1; 
     $(".clubsevent").eq(i).animate({ 
      left:elemleft, 
      top:elemtop, 
      height:elemheight, 
      width:elemwidth, 
      opacity:elemopacity, 
     },250); 
     } 
     } 




    }); 
    }) 

입니다이 나는 임의의 위치에 다른 이미지를 보낼 수 있어요 내 HTML 부분

<div class="clubsevent" left="100" top="100" id="cepheid"></div> 
<div class="clubsevent" left="210" top="100" id="endeavour"></div> 
<div class="clubsevent" left="320" top="100" id="electronika"></div> 
<div class="clubsevent" left="430" top="100" id="e-cell"></div> 
<div class="clubsevent" left="100" top="160" id="infero"></div> 
<div class="clubsevent" left="210" top="160" id="informals"></div> 
<div class="clubsevent" left="320" top="160" id="kludge"></div> 
<div class="clubsevent" left="430" top="160" id="robotics"></div> 
<div class="clubsevent" left="100" top="220" id="torque"></div> 

입니다 . 그러나 문제는 때로 내가 한 요소 위로 마우스를 가져갈 때입니다. 애니메이션이 반복적으로 발생합니다. 움직이는 다른 요소가 트리거하고 있기 때문에 발생할 수 있다고 생각했습니다. 플래그를 추가했지만 작동하지 않았습니다.

Answer 1

var len,i,hoverindex,flag=0; 
$(function(){ 
len = $(".clubsevent").length; 
$(".clubsevent").hoverIntent(function(){ 
    if(flag==0){ 
    flag=1; 
     hoverindex= $(".clubsevent").index(this); 
$(".clubsevent").eq(hoverindex).css('z-index',2); 
for(i=0;i<len;i++){ 
    if(i!=hoverindex){ 
    var rand=Math.random(); 
    var elemheight =rand*parseInt($(".clubsevent").eq(i).css('height')); 
    var elemwidth =rand*parseInt($(".clubsevent").eq(i).css('width')); 
    var elemleft = Math.random()*250; 
    var elemtop = Math.random()*250; 
    var elemopacity = Math.random()*.6; 
    $(".clubsevent").eq(i).animate({ 
     left:elemleft, 
     top:elemtop, 
     height:elemheight, 
     width:elemwidth, 
     opacity:elemopacity, 
    },250); 
    } 

} 

    } 


},function(){ 
    if(flag==1){ 
     flag=0; 
     for(i=0;i<len;i++){ 
    var elemheight =50; 
    var elemwidth =100; 
    var elemleft = $(".clubsevent").eq(i).attr('left'); 
    var elemtop = $(".clubsevent").eq(i).attr('top'); 
    var elemopacity = 1; 
    $(".clubsevent").eq(i).stop().animate({ 
     left:elemleft, 
     top:elemtop, 
     height:elemheight, 
     width:elemwidth, 
     opacity:elemopacity, 
    },250); 
    } 
    } 




}); 
}) 

나는 애니메이션 기능을하기 전에() .stop 추가 한 : http://api.jquery.com/stop/

Answer 2

는이 같은 시도 질문의 같은 종류의 여기 내 대답을 참조 set timer/ set timeout delay in mouseenter function

var flag = false; 
$('#ele').hover(function(){ 
    flag = true; 
    var that = $(this); 
    window.setTimeout(function(){ 
     if(flag) that.animate({...}, 500); 
    }, 300); 
}, function(){ 
    flag = false; 
});