Question

有人可以向我解释为什么淡出效果不适用于以下代码。当我说它不能正常工作时，图像会消失，但它不会在800毫秒的时间内淡出。但是Fade In工作得很好。

        $('.main-image').fadeOut(800);

        $('.main-image').hide();

        $('.main-image').attr('src',newUrl);  

        $('.main-image').css('margin-left','-' + divWidth+'px');    

        $('.main-image').fadeIn(800);

Answer 1

这是因为您之后直接调用hide()，您希望在完整回调中的fadeOut()之后执行代码，第二个参数。

$('.main-image').fadeOut(800, function() { // do stuff when fade is done });

fadeIn()工作正常，因为它是最后一个动作。

$('.main-image').fadeOut(800, function() {

    // $('.main-image').hide(); // Can be removed as fadeOut will do that already

    $('.main-image')
        .attr('src',newUrl)
        .css('margin-left','-' + divWidth+'px')
        .fadeIn(800);
});

Answer 2

在淡出完成之前，您正在调用.hide()。 .fadeOut()将隐藏此信息，之后无需调用hide。

另外，关于jquery的一件好事就是链接。您可以如下简化：

$('.main-image')
    .fadeOut(800)
    .attr('src',newUrl)
    .css('margin-left','-' + divWidth+'px')
    .fadeIn(800);

JQuery FadeOut无法正常工作

2 个答案: