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循环插件 http://jquery.malsup.com/cycle/begin.html

希望这有帮助。

Answer 2

这是我刚刚发起的循环插件的轻量级版本：

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 3

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

这是一个例子，不知道这是不是你想要的，但如果它是一个插件会有点过分。

悬停img fadeIn next或fadeIn first img

3 个答案: