悬停 img fadeIn next 或 fadeIn first img答案

【问题标题】：Hover img fadeIn next or fadeIn first img悬停 img fadeIn next 或 fadeIn first img
【发布时间】：2011-07-04 16:22:24
【问题描述】：

我已经简化了我在上一个问题中想要实现的目标。

这是我正在尝试编写的脚本示例：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();
        });
    }
});

【问题讨论】：

如果没有找到第一张图像并正确淡入第一张图像，则为 else。我希望这可以作为一个循环不断循环通过隐藏的图像
谁能帮我解决这个问题，不胜感激
现在更清楚了。我会帮你的，给我几分钟时间

标签： javascript jquery

【解决方案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 的淡入淡出函数相同的允许值（即“fast”、“slow”或数值）。

【讨论】：

【解决方案2】：

你最好使用jquery循环插件。
http://jquery.malsup.com/cycle/begin.html

希望这会有所帮助。

【讨论】：

我先看了这个，虽然它更像是一个幻灯片，因为我只希望它只在悬停时工作。如果我有 10 多种产品都带有活动周期插件，那就太矫枉过正了。
[code] $('#s3').hover( function() { $(this).cycle({ fx: 'fade', speed: 400, timeout: 300, next: ' #s3', 暂停: 0 }); }, function(){ $(this).cycle('stop'); } ); [/code] 也许这样的事情将是我最后的手段。

【解决方案3】：

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

这里是一个例子，不知道这是否是你想要的，但如果它是一个插件就过分了。

【讨论】：