Question

我在浏览，我看到了这个网站

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

我喜欢将鼠标悬停在图片上时发生的动画。由于它仅适用于chrome，我决定对其进行编码。

以下是我的代码

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);
      }
         }




    });
  })

这是我的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;
  }

这是我的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);
  }
     }




});
})

我在animate函数之前添加了.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;
 });

.hover导致重复动画？

2 个答案: