悬停img fadeIn next或fadeIn first img

Question

我已经从上一个问题中简化了我试图实现的目标。

这是我正在尝试编写的脚本的一个示例：example当您将鼠标悬停在图像上时，您可以看到问题。可以通过延迟修复吗？

我有一个产品列表，每个2-5缩略图图像。我想创建一个在隐藏/显示下一个图像的图像之间循环的悬停函数。

我确实尝试过使用z-index来堆叠图像，尽管这造成了太多的问题。

这是我到目前为止放在一起的hover函数：

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

这是我刚刚开发的一个cycle插件的轻量级版本：

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

其中"Timeout“是切换图像之间以毫秒为单位的值，而"FadeSpeed”是与jquery的淡入淡出函数相同的允许值(即“快速”、“缓慢”或数值)。

Answer 2

你最好使用jquery cycle插件。

http://jquery.malsup.com/cycle/begin.html

希望这能有所帮助。

Answer 3

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

这里有一个例子，不知道这是否是你想要的，但如果它是一个插件，那就太夸张了。