悬停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/

这里是一个例子，并不确切地知道，如果这是你想要的，但如果它是一个插件将是矫枉过正。