Javascript 带淡入淡出的jQuery开关图像

我有一个脚本，可以更改悬停时的一些图像。效果非常好，不过我想在两幅图像之间添加一点淡入淡出。这是剧本。对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);
    });

---

给我一个小小的搜索：我想这正是你想要的

或者，您可以使用线程来执行以下操作：

---

最好使用.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效果。

经过短暂测试，这要感谢

鼠标指针的注释

已编辑

HTML：

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

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”）。每个（函数（）{
var w=$（this）.width（）+'px'；
var h=$（this）.height（）+'px'；
var src=$（this.attr（'src'）；
var rel=$（this.attr（'rel'）；
$（this.addClass（'显示'）；
if（！$（this）.parents（'.image_holder'）.length）{
$（此）.wrap（“”）；
$（this.parents（'.image_holder'）。append（''）；
}
});
}
初始滚动（）；
功能开关（el，速度=425）{
var front=el.find（“.front”）；
if（front.hasClass（'显示'））{
前端。fadeTo（速度，0，功能（）{
$（this.removeClass（'显示'）；
});
}
否则{
正面动画({
不透明度：1
}，速度，功能（）{
$（this.addClass（'显示'）；
});
}
}
$（document）.on（'mouseenter'，'.image_holder'，function（）{
doImageSwitch（$（this））；
});
谢谢！看起来不错，但很抱歉我应该解释得更清楚。与其淡出淡入，还有什么方法可以转换这两个图像吗？你可以加载两个图像，一个在另一个上面。然后淡出最上面的一个。关于
mouseenter
，值得注意。太好了，谢谢！唯一的问题是，它会将我所有的图像移动到标记的底部？当我添加rollover.js时，就在下面，而不是图像在标记中的实际位置？我将答案更新为使用jQuery的
wrap（）
方法，该方法允许您只包装图像，而不指定容器。
.image_holder {
  position: relative;
}

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

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

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