带有淡入淡出的jQuery切换图像答案

【问题标题】：jQuery switch image with fade带有淡入淡出的jQuery切换图像
【发布时间】：2014-05-20 00:07:54
【问题描述】：

我有一个脚本可以在悬停时更改一些图像。效果很好，但是我想在两个图像之间添加一点淡入淡出。这是脚本。对 jQuery 来说真的很新，所以我有点困惑在哪里添加它。任何帮助将不胜感激

jQuery(document).ready(function ($) {
    var img_src = "";
    var new_src = "";
    $(".rollover").hover(function () {
        img_src = $(this).attr('src');
        new_src = $(this).attr('rel');
        $(this).attr('src', new_src);
        $(this).attr('rel', img_src);
    }, function () {
        $(this).attr('src', img_src);
        $(this).attr('rel', new_src);
    });
    //preload images 
    var cache = new Array();
    //cycle through all rollover elements and add rollover img src to cache array 
    $(".rollover").each(function () {
        var cacheImage = document.createElement('img');
        cacheImage.src = $(this).attr('rel');
        cache.push(cacheImage);
    });

【问题讨论】：

标签： javascript jquery image fade

【解决方案1】：

简单测试，感谢@Oksid 的mouseenter 评论。

已编辑

HTML：

<img class="front rollover" src="http://placehold.it/350x150/006699" rel="http://placehold.it/350x150/000000" />

CSS：

.image_holder {
  position: relative;
}

.image_holder img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.image_holder img.front {   
  z-index: 2 !important;
}

jQuery：

function init_rollovers() {
    $(".rollover").each(function() {
        var w = $(this).width()+'px';
        var h = $(this).height()+'px';
        var src = $(this).attr('src');
        var rel = $(this).attr('rel');
        $(this).addClass('shown');
        if (!$(this).parents('.image_holder').length) {
            $(this).wrap('<div class="image_holder" style="width:'+w+';height:'+h+';"></div>');
            $(this).parents('.image_holder').append('<img src="'+rel+'" />');
        }
    });
}

init_rollovers();

function doImageSwitch(el, speed=425) {
    var front = el.find(".front");
    if (front.hasClass('shown')) {
        front.fadeTo(speed, 0, function() {
            $(this).removeClass('shown'); 
        });
    }
    else {
        front.animate({
            opacity: 1
        }, speed, function() {
            $(this).addClass('shown'); 
        });
    }
}

$(document).on('mouseenter', '.image_holder', function() {
    doImageSwitch($(this));
});

【讨论】：

酷，谢谢！唯一的问题是它会将我所有的图像移动到标记的底部？就在我添加 rollover.js 的下方，而不是图像实际在标记中的位置？ i57.tinypic.com/70jlls.png
我更新了答案以使用 jQuery 的 wrap() 方法，它允许您只包装图像，而不是指定容器。

【解决方案2】：

function imageSwitch(img) {
    var src = img.attr('src');
    var rel = img.attr('rel');
    img.fadeOut('fast', function() {
            img.attr('src', rel);
            img.attr('rel', src);
            img.fadeIn('fast');
    });
}

$(".rollover").on('mouseenter', function() {
        imageSwitch($(this));
});

【讨论】：

谢谢！它看起来不错，但很抱歉我应该更好地解释这一点。而不是只是淡出然后淡入，有没有办法转换两个图像？
您可以加载两个图像，其中一个在另一个之上。然后只是淡出顶部。

【解决方案3】：

最好使用 .mouseenter。

您可以将 .animate() opacity 设置为 0，然后在回调中更改图像 src，以便在动画结束后更改 src。

$('.rollover').mouseenter(function () {
   var me = $(this),
     new_src = me.attr('rel'),
     anmiation_duration = 300; // 300ms
   me.animate({
     opacity: 0
   }, anmiation_duration, function () {
     me.attr('src', new_src).css({'opacity':'1'});
   })
});

更改 src 后，您可以执行另一个 .animate() 将不透明度设置回 1。

不过，我建议将另一张图片显示在第一张图片的后面（使用 position:absolut 将图片相互叠加）。这样一来，不透明度的变化就会产生某种 morf 效果。

【讨论】：

关于mouseenter 的好消息。已编辑。

【解决方案4】：

一个小的搜索给我：http://www.simonbattersby.com/demos/crossfade_demo_basic.htm我想这有点像你在找什么。

否则你的线程也会做某事： jQuery Change Image src with Fade Effect

【讨论】：