淡出图像，然后更改源，然后再次淡入图像答案

【问题标题】：Fadeout an Image then Changing the source and after changing fade in the Image again淡出图像，然后更改源，然后再次淡入图像
【发布时间】：2013-10-14 16:14:15
【问题描述】：

我正在这里制作一个滑块。我正在做的是在一个按钮上单击下一步，我正在淡出图像，然后动态更改源然后淡入。现在我不是用fadeOut（）函数来做这个，而不是我通过添加一个来做到这一点不透明度为 0 的 css 类 fadeOut，然后在更改 src 后删除该类。我怎样才能做到这一点？我还需要一些时间才能让它消失，我尝试了 addClass() 和 removeClass() 方法，但是它们太快了以至于没有显示淡入淡出。请帮忙。谢谢。

这是下一个按钮处理程序的代码

 $('#nextHandler').click( function() {
        var nextListItem = ul.find('li.current').next();
        if ( nextListItem.length > 0 ) {
            ul.find('li.current').removeClass('current');
            nextListItem.addClass('current');
            var imagePath = ul.find('li.current').children('img').data("fullsrc");

            $('#fullImagePlaceholder').fadeOut(function () {
                $('#fullImagePlaceholder').attr('src', imagePath).fadeIn(500);
            }, 500);
        }
    });
});

现在我添加了 FadeOut 功能，但它直到无法正常工作。

【问题讨论】：

你能发布你到目前为止的代码吗？

标签： jquery css

【解决方案1】：

你还没有发布你的实际代码，但我想你想要这样的东西。当next链接/按钮被点击时，它会淡出你的图像，编辑src属性为新图像，然后再次淡入图像。

var selectorForImg = 'img';
var newSrcLocation = 'img2.jpg';

$('#next').click(function (e) {
    e.preventDefault();
    $('selectorForImg').fadeOut(function() {
        $('selectorForImg').attr('src', newSrcLocation).fadeIn(500);
    }, 500);
});

【讨论】：

我想用 AddClass() 方法而不是 fadeOut() 方法来做这件事，我添加了一个不透明度为 0 的名为 fadeOut 的 Css 类。
@MarcAndre “它不工作”并不是真的太多了，伙计。另外，为什么要添加不透明度为 0 的类？你不想要过渡还是..？

【解决方案2】：

好吧，我不太确定，因为我对您目前拥有的代码一无所知，但可能是这样的。

$(this).fadeOut("fast", function(){
        $(this).attr("background-image", "url([name of new image])").fadeIn("fast");
});

类似这样，这是应用为背景图像的图像容器。

【讨论】：

我不认为他在使用background-image
您的答案似乎涵盖了这一点:)

【解决方案3】：

您可以使用 css 关键帧动画。即。

@-webkit-keyframes animation-name {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes animation-name {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes animation-name {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes animation-name {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

div{
-webkit-animation: animation-name 0.6s ease-in 0.8s both;
-moz-animation: animation-name 0.6s ease-in 0.8s both;
-o-animation: animation-name 0.6s ease-in 0.8s both;
-ms-animation: animation-name 0.6s ease-in 0.8s both;
animation: animation-name 0.6s ease-in 0.8s both;
}

我也在这里发布了一个示例： http://jsfiddle.net/guqv7/

【讨论】：

【解决方案4】：

如果你想在另一件事开始之前完成某件事，请将它包含在 function() 中；

【讨论】：