0

ブラウジングしていて、このサイトを見ました

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

画像にカーソルを合わせると起こるアニメーションが気に入りました。クロムでしか動作しないので、コーディングすることにしました。

以下は私のコードです

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>

他のすべての画像をランダムな位置に送信できます。しかし、問題は、1 つの要素にカーソルを合わせると時々発生することです。アニメーションが繰り返し発生します。これは、アニメーション化されていた他の要素がトリガーされたためではないかと考えました。フラグを追加しましたが、機能しませんでした。

4

2 に答える 2

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/

于 2013-08-19T20:49:12.843 に答える
0

このようにしてみてください。同じ種類の質問については、ここで私の回答を参照してください。

 var flag = false;
 $('#ele').hover(function(){
   flag = true;
   var that = $(this);
   window.setTimeout(function(){
      if(flag) that.animate({...}, 500);
   }, 300);
 }, function(){
   flag = false;
 });
于 2013-08-19T20:49:54.080 に答える