如何使淡入淡出过渡成为“淡入淡出"? [英] How do I make fade transition 'crossfade'?

问题描述

我正在尝试使其淡入淡出，但我不确定如何做到这一点.

I'm trying to get this to crossfade, but I'm not entirely sure how.

如何使这个jQuery方法淡化图像?

How can I make this jQuery method crossfade the images?

$('a.thumb').click(function () {
    var src = $(this).attr('href');
    if (src != $('div#imageDisplay > img').attr('src')) {
        $('div#imageDisplay > img').stop().animate({ opacity: '0', duration: 500 }, function () {
            $(this).attr('src', src);
        }).load(function () {
            $(this).stop().animate({ opacity: '1', duration: 500 });
        });
    }
    return false;
});

推荐答案

两个图像之间的交叉淡入淡出(其中一个淡出，另一个淡入)需要两个图像，每个图像都有自己的动画.您不能只使用一个图像标签.您将需要两个图像.有多种方法可以将背景图像用于其中一幅图像，但坦率地说，这比使用两个<img>标签要复杂得多.

A cross fade between two images (where one fades out and the other fades in) requires two images, each with their own animation. You can't do it with just one image tag. You will need two images. There are ways to use a background image for one of the images, but frankly that's just more complicated than using two <img> tags.

以下是一些使用两个图像标签实现交叉淡入淡出的jQuery:

Here's some jQuery that implements a cross fade using two image tags:

// precache all images so they will load on demand
var imgs = [];
$('a.thumb').each(function() {
    var img = new Image();
    img.src = this.href;
    imgs.push(img);
}).click(function () {
    var oldImg = $("#fadeContainer img");

    var img = new Image();
    img.src = this.href;
    var newImg = $(img).hide();
    $("#fadeContainer").append(img);

    oldImg.stop(true).fadeOut(500, function() {
        $(this).remove();
    });
    newImg.fadeIn(500);
    return false;
});​

您可以在这里看到它的工作: http://jsfiddle.net/jfriend00/frXyP/

You can see it work here: http://jsfiddle.net/jfriend00/frXyP/

这基本上是它的工作方式:

This is basically how it works:

1. 获取当前图像
2. 创建新的图像对象
3. 从点击的链接中获取URL并分配给新的图像标签
4. 隐藏新图像
5. 将新图像插入fadeContainer
6. 启动现有图像的淡出和淡入或新图像
7. fadeOut完成后，移除该图像，以便为下一个周期做好准备

这篇关于如何使淡入淡出过渡成为“淡入淡出"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！