Javascript jQuery 淡出新图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1977557/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery fade to new image
提问by user149109
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.
如何使用 jquery 将一个图像淡入另一个？据我所知，您将使用fadeOut，使用attr() 更改源，然后再次使用fadeIn。但这似乎并不正常。我不想使用插件，因为我希望添加相当多的改动。
Thanks.
谢谢。
回答by Ryan McGeary
In the simplest case, you'll need to use a callback on the call to fadeOut().
在最简单的情况下，您需要在调用fadeOut() 时使用回调。
Assuming an image tag already on the page:
假设页面上已经有一个图像标签：
<img id="image" src="http://sstatic.net/so/img/logo.png" />
You pass a function as the callback argument to fadeOut()that resets the srcattribute and then fades back using fadeIn():
您将函数作为回调参数传递给fadeOut()重置src属性，然后使用fadeIn()以下方法淡出：
$("#image").fadeOut(function() {
$(this).load(function() { $(this).fadeIn(); });
$(this).attr("src", "http://sstatic.net/su/img/logo.png");
});
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).
对于 jQuery 中的动画，在动画完成后执行回调。这使您能够按顺序链接动画。请注意对 的调用load()。这确保图像在淡入之前加载（感谢 Y. Shoham）。
回答by mauris
Well, you can place the next image behind the current one, and fadeOut the current one so that it looks like as though it is fading into the next image.
好吧，您可以将下一张图像放在当前图像的后面，并淡出当前图像，使其看起来好像正在淡入下一张图像。
When fading is done, you swap back the images. So roughly:
褪色完成后，您可以交换回图像。大致如下：
<style type="text/css">
.swappers{
position:absolute;
width:500px;
height:500px;
}
#currentimg{
z-index:999;
}
</style>
<div>
<img src="" alt="" id="currentimg" class="swappers">
<img src="" alt="" id="nextimg" class="swappers">
</div>
<script type="text/javascript">
function swap(newimg){
$('#nextimg').attr('src',newimg);
$('#currentimg').fadeOut(
'normal',
function(){
$(this).attr('src', $('#nextimg').attr('src')).fadeIn();
}
);
}
</script>
回答by Y. Shoham
$("#main_image").fadeOut("slow",function(){
$("#main_image").load(function () { //avoiding blinking, wait until loaded
$("#main_image").fadeIn();
});
$("#main_image").attr("src","...");
});
回答by psychotik
Are you sure you're using the callbackyou pass into fadeOutto change the source attr and then calling fadeIn? You can't call fadeOut, attr()and fadeInsequentially. You must wait for fadeOutto complete...
您确定要使用callback传入的fadeOut来更改源属性然后调用fadeIn吗？您不能按顺序调用fadeOut,attr()和fadeIn。您必须等待fadeOut完成...
回答by Chris Trudeau
Old question but I thought I'd throw in an answer. I use this for the large header image on a homepage. Works well by manipulating the z-index for the current and next images, shows the next image right under the current one, then fades the current one out.
老问题，但我想我会回答。我将它用于主页上的大标题图像。通过操纵当前和下一张图像的 z-index 效果很好，在当前图像的正下方显示下一张图像，然后淡出当前图像。
CSS:
CSS：
#jumbo-image-wrapper
{
width: 100%;
height: 650px;
position: relative;
}
.jumbo-image
{
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
HTML:
HTML：
<div id="jumbo-image-wrapper">
<div class="jumbo-image" style="background-image: url('img/your-image.jpg');">
</div>
<div class="jumbo-image" style="background-image: url('img/your-image-2'); display: none;">
</div>
</div>
Javascript (jQuery):
Javascript (jQuery):
function jumboScroll()
{
var num_images = $("#jumbo-image-wrapper").children(".jumbo-image").length;
var next_index = jumbo_index+1;
if (next_index == num_images)
{
next_index = 0;
}
$("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).css("z-index", "10");
$("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).css("z-index", "9");
$("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).show();
$("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).fadeOut("slow");
jumbo_index = next_index;
setTimeout(function(){
jumboScroll();
}, 7000);
}
It will work no matter how many "slides" with class .jumbo-image are in the #jumbo-image-wrapper div.
无论#jumbo-image-wrapper div 中有多少带有 .jumbo-image 类的“幻灯片”，它都会起作用。
回答by Eddy Goh
For those who want the image to scale according to width percentage(which scale according to your browser width), obviously you don't want to set height and width in PIXEL in CSS.
对于那些希望图像根据宽度百分比（根据您的浏览器宽度进行缩放）缩放的人，显然您不想在 CSS 中的 PIXEL 中设置高度和宽度。
This is not the best way, but I don't want to use any of the JS plugin.
这不是最好的方法，但我不想使用任何 JS 插件。
So what can you do is:
那么你能做的是：
- Create one same size transparent PNG and put an ID to it as second-banner
- Name your original image as first-banner
- Put both of them under a DIV
- 创建一个相同大小的透明 PNG 并为其添加一个 ID 作为 第二个横幅
- 将您的原始图像命名为第一条横幅
- 将它们都放在 DIV 下
Here is the CSS structure for your reference:
这是供您参考的 CSS 结构：
.design-banner {
position: relative;
width: 100%;
#first-banner {
position: absolute;
width: 100%;
}
#second-banner {
position: relative;
width: 100%;
}
}
Then, you can safely fade out your original banner without the content which placed after your image moving and blinking up and down
然后，您可以安全地淡出您的原始横幅，而不会在您的图像移动和上下闪烁之后放置的内容
