jQuery淡出新图像 [英] jQuery fade to new image

问题描述

如何使用jquery将一个图像淡入另一个图像？据我所知，你会使用fadeOut，用attr（）更改源，然后再次使用fadeIn。但这似乎并不合适。我不想使用插件，因为我希望添加相当多的更改。

How can I fade one image into another with jquery? As far as I can tell you would use fadeOut, change the source with attr() and then fadeIn again. But this doesn't seem to work in order. I don't want to use a plugin because I expect to add quite a few alterations.

谢谢。

推荐答案

在最简单的情况下，您需要在调用 fadeOut（） 时使用回调。

In the simplest case, you'll need to use a callback on the call to fadeOut().

假设页面上已有图片标记：

Assuming an image tag already on the page:

<img id="image" src="http://sstatic.net/so/img/logo.png" />

您将函数作为回调参数传递给 fadeOut（）重置 src 属性，然后使用 fadeIn（）：

You pass a function as the callback argument to fadeOut() that resets the src attribute and then fades back using fadeIn():

$("#image").fadeOut(function() { 
  $(this).load(function() { $(this).fadeIn(); }); 
  $(this).attr("src", "http://sstatic.net/su/img/logo.png"); 
}); 

对于jQuery中的动画，动画完成后将执行回调。这使您能够按顺序链接动画。请注意对 load（）的调用。这样可以确保在淡入之前加载图像（感谢Y. Shoham）。

For animations in jQuery, callbacks are executed after the animation completes. This gives you the ability to chain animations sequentially. Note the call to load(). This makes sure the image is loaded before fading back in (Thanks to Y. Shoham).

这是一个有效的例子

Here's a working example

这篇关于jQuery淡出新图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！