javascript - 将鼠标悬停在下一个图像上淡入淡出或在第一个图像上淡入淡出

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

其中“Timeout”是切换图像之间的毫秒值，“FadeSpeed”是与 jquery 的淡入淡出功能相同的允许值(即“快”、“慢”或数值)。