jquery - 无法使用 jQuery 和 CSS3 正确交叉淡入淡出图像？

Question

我有一个图片库:

我的计划是，当我点击较小的图像时，它会淡入到大图像的顶部。
( see my fiddle )

我想使用 CSS3 transition: opacity 0.8s ease; 来实现这一点。

我可以用

$(img).appendTo($('.inner-container')).hide().fadeIn()

但这也不是很好。

我的代码:

$('.slides-container img').on('click', function(){
    var url = $(this).attr('src');
    var currentImg = $('.inner-container img');
    var img = $('<img/>').attr({
        src: url,
        class: '',
        alt: '',
        title: ''
    });

    /*
    $(img).appendTo($('.inner-container')).hide().fadeIn(800, function(){
        $(currentImg).remove();
    });
    */

    $(img).appendTo($('.inner-container')).removeClass('hide').promise().done(function(){
        setTimeout(function () {
            $(currentImg).remove();
        }, 800);
    });

});

为了获得平滑的淡入，我缺少什么？

Answer 1

解决这个问题:

$(img).appendTo...

为此:

img.appendTo...

因为它已经声明为 jQuery 元素。

看看它是否有效，JS 方式:http://jsfiddle.net/46JQS/3/

请注意，我还必须删除 CSS 过渡，以免它们相互冲突。

---

这是 CSS 版本。出于某种原因，我还必须在删除 hide 类之前添加一点超时并且它有效:http://jsfiddle.net/46JQS/6/ .我相信这是因为类在元素呈现在 DOM 中之前被删除，所以 CSS 过渡从未触发。

我也删除了 promise 。