使用JQuery慢慢更改/淡化/动画图像

Question

这是我的img, <img src="one.png" id="one" onMouseOver="animateThis(this)">

当用户将鼠标悬停在使用jQuery时,我想慢慢将此图像src更改为"oneHovered.png".哪种jQuery方法最好这样做？我看到很多例子都希望我改变CSS背景.有什么可以直接改变src属性吗？

Answer 1

您可以首先淡出图像,使用第一个可选参数控制淡出的持续时间.淡出完成后,将触发匿名回调,并将图像的源替换为新的.之后,我们使用另一个持续时间值淡入图像,以毫秒为单位:

原始HTML:

<img src="one.png" id="one" />

JavaScript的:

$('#one').hover(function() {

    // increase the 500 to larger values to lengthen the duration of the fadeout 
       // and/or fadein
    $('#one').fadeOut(500, function() {
        $('#one').attr("src","/newImage.png");
        $('#one').fadeIn(500);
    });

});

最后,使用jQuery,动态绑定JavaScript事件要轻松得多,而不使用HTML本身的任何JavaScript属性.我修改了原始img标记,以便它只具有src和id属性.

在jQuery的悬停事件将确保当用户将鼠标悬停鼠标图像的功能火灾.

有关更多阅读,另请参阅jQuery fadeOut和jQuery fadeIn.

图像加载时间可能出现问题:

如果这是用户第一次悬停在图像上并请求它,实际的fadeIn可能会有轻微的故障,因为在请求newImage.png时服务器会有延迟.解决方法是预加载此图像.StackOverflow上有几个预加载图像的资源.