Hover img fadeIn nextまたはfadeIn first img

Question

私は以前の質問から達成しようとしていることを単純化しました。

これは、書き込みしようとしているスクリプトの例です。example画像の上にマウスを移動すると、問題が表示されます。遅延の可能性のある修正？

私は2~5個のサムネイル画像を持つ製品のリストを持っています。私は、次の画像を隠す/表示する画像を循環するホバー機能を作成したい。

私はzインデックスを使用してイメージをスタックしようとしましたが、これは問題を引き起こしていました。

これは私がこれまでに一緒に入れているホバー機能である：

$(".image_cycle img").live("hover", function(){ 

    if ($(this).next("img").is(":hidden")) { 
     $(this).next("img").fadeIn("slow",function(){ 
      $(this).siblings("img").hide(); 
     }); 
    } else { 
     $(this).parent().find("img:first").fadeIn("slow",function(){ 
      $(this).siblings().hide(); 
     }); 
    } 
}); 

Answer 1

これは私が手早くてきたサイクルプラグインの軽量バージョンです：

$(".image_cycle").HoverCycle(); 

：

jQuery.fn.HoverCycle = function(params){ 
      var defaults = { 
       "Timeout": 1500, 
       "FadeSpeed": "slow" 
      }; 
      var opts = $.extend(defaults, params); 
      if(isNaN(opts.Timeout)){ 
       throw "Hover Timeout value must be numeric"; 
      } 
      (function(){ 
       var valid = true; 
       if(isNaN(opts.FadeSpeed)){ 
        opts.FadeSpeed = opts.FadeSpeed.toLowerCase(); 
        valid = (opts.FadeSpeed == "slow" || opts.FadeSpeed == "fast"); 
       }else if(opts.FadeSpeed <= 0){ 
        valid = false; 
       } 
       if(!valid){ 
        throw "FadeSpeed must be either numeric and above zero, or either 'slow' or 'fast'"; 
       } 
      })(); 
      return this.each(function(){ 
       var cycleTimer; 
       var $firstImg = $currentImg = $(this).find("img:first"); 
       $(this).mouseenter(function(){ 
        cycleTimer = setInterval(function(){ 
         var $nextImg = $currentImg.next(); 
         if($nextImg.length == 0){ 
          $nextImg = $firstImg; 
         } 
         $currentImg.fadeOut(opts.FadeSpeed, function(){ 
          $nextImg.fadeIn(opts.FadeSpeed, function(){ 
           $currentImg = $nextImg; 
          }); 
         }); 
        }, opts.Timeout); 
       }).mouseleave(function(){ 
        clearInterval(cycleTimer); 
       }); 
      }); 
     }; 

は、ので、この場合には、画像のコンテナにタグを適用します

タグ内で宣言されている順序で画像をループします。あなたはコンストラクタを介してフェード速度やタイムアウト時間を上書きすることができます。

「タイムアウト」の画像を切り替えることの間にミリ秒の値であり、「FadeSpeedは」jQueryのフェード機能（すなわち "と同じ許可された値である

$(".image_cycle").Cycle({ "Timeout": 3000, "FadeSpeed": "fast" }); 

「速い」、「遅い」、または数値）。ここ

Answer 2

をあなたはより良いjQueryのサイクルのプラグインを使用することができます。
http://jquery.malsup.com/cycle/begin.html

これが役に立ちます。

Answer 3

http://jsfiddle.net/MtpPN/1/

は一例ですが、それはあなたが望むものであるならば、正確に知りませんが、それはプラグインの場合はやり過ぎでしょう。