Question

我有一个脚本可以在悬停时更改一些图像。工作得很好，但我想在这两个图像之间添加一点点淡入淡出。这是脚本。对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);
    });

Answer 1

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

Answer 2

小搜索告诉我：http://www.simonbattersby.com/demos/crossfade_demo_basic.htm我觉得它有点像你在寻找的东西。

或者你也有线程做某事： jQuery Change Image src with Fade Effect

Answer 3

最好使用.mouseenter。

你可以将.animate（）不透明度设为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。

然而，我会建议将另一张图像显示在第一张图像后面（图像使用位置放置在彼此之上：absolut）。这样，不透明度的变化会产生一定的效应。

Answer 4

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

<强> EDITED

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

jQuery切换图像与淡入淡出

4 个答案: