fadeOut fadeIn Chrome 问题答案

【问题标题】：fadeOut fadeIn Chrome issuefadeOut fadeIn Chrome 问题
【发布时间】：2012-11-02 04:33:28
【问题描述】：

我试图同时淡出一个 div 和淡入另一个 div。它可以在 Firefox 和 IE(7-9) 中正确运行，也可以在 Chrome 中运行。但是，在 chrome 中，在淡出之后，我的页面必须滚动到顶部，然后再淡入。

我希望在谷歌浏览器中没有像 Firefox 和 IE 那样滚动的情况。

$("ul.main_news li:eq(0)").hover(function(){
    $(".a").stop(true, true).fadeOut(300).promise().done(function(){
    $(".b").stop(true, true).fadeIn();  
    }); 
    $(this).removeClass("asew");
    $(this).addClass("sdghe");
    $("ul.main_news li:eq(1)").removeClass("sdghe");
    $("ul.main_news li:eq(1)").addClass("asew");
    });


$("ul.main_news li:eq(1)").hover(function(){
    $(".b").stop(true, true).fadeOut(300).promise().done(function(){
    $(".a").stop(true, true).fadeIn();
    });
    $(this).removeClass("asew");
    $(this).addClass("sdghe");
    $("ul.main_news li:eq(0)").removeClass("sdghe");
    $("ul.main_news li:eq(0)").addClass("asew");
});

【问题讨论】：

标签： google-chrome fadein fadeout

【解决方案1】：

你应该使用这个嵌入promise()的代码

$(".b").stop(true, true).fadeOut(300).queue(function(){
    $(".a").stop(true, true).fadeIn();
});

【讨论】：

欢迎来到 SO，很高兴看到您发布了您的第一个答案！在代码中添加描述总是很好的，所以 OP 和其他人在寻找相同的答案，完全理解发生了什么，以及它与他们尝试过的有什么不同。

【解决方案2】：

你不想在任何地方使用stop() 方法！可能在fadeOut()的回调中使用有问题！试试这个：

("ul.main_news li:eq(1)").hover(function(){
      $(".b").stop(true, true).fadeOut(300).promise().done(function(){
        $(".a").fadeIn();
    });

【讨论】：

【解决方案3】：

您应该在没有回调的情况下使用此代码：

$(".a").stop(true, true).fadeIn(300);       
$(".b").stop(true, true).fadeOut(0);

【讨论】：