懸停img淡入淡化或淡入首先img

Question

我已簡化了我想要實現從我以前的問題。

這是我試圖編寫的腳本示例：example當您將鼠標懸停在圖像上時，您可以看到問題。可能修復延遲？

我有一個產品列表，每個2-5縮略圖圖像。我想創建一個懸停功能，可以循環顯示隱藏/顯示下一張圖像的圖像。

我確實嘗試使用z-index堆疊圖像，儘管這造成了太多的問題。

這是我迄今放在一起懸停功能：

$(".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

這是一個循環的插件的輕量級版本，我剛剛颳起了：

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

它應用到圖像的容器，所以在這種情況下，標籤：

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

它將按照在標籤中聲明的順序遍歷圖像。你可以通過構造覆蓋淡入淡出的速度和超時持續時間：

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

其中「超時」是在它之間毫秒切換圖像的價值，而「FadeSpeed」是一樣的允許值jQuery的淡入淡出功能（即「快速「，」慢「或數值）。

Answer 2

你可以更好的使用jQuery的週期插件。
http://jquery.malsup.com/cycle/begin.html

希望這會有所幫助。

Answer 3

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

這裏是一個例子，並不確切地知道，如果這是你想要的，但如果它是一個插件將是矯枉過正。