Question

我遇到fadeOut()的问题。如果我使用<div>，我的fadeOut()会乘以2，但如果我只是让<div>直接显示（<div>'没有淡出），这里没有问题。你知道我能做些什么吗？

以下是不起作用的行（点击后，它会给我两个<div>而不是一个，如果我再次点击，则会出现四个<div>，等等。）

div.fadeOut().empty().append(content).fadeIn('fast', function(){

和那个有效的（但我想拥有fadeOut）：

div.empty().append...

和整个代码：

$(document).ready(function(){
    var loader = $('#loading');
    var div = $("#provisoire");

    div.append($(".content:first").html()).css({'display':'block'});

    $(".plus").click(function(){
        var name = $(this).attr("rel");
        changeContent(name);
        return false;
    });

    function changeContent(name){
        var content = (name)?$("#"+name).html():$(".content:first").html();
        loader.fadeIn();
        $('html,body').animate({'scrollTop':0}, 600, function(){
            div.empty().append(content).fadeIn('fast', function(){ //*** here
                loader.fadeOut();
                if(name){
                    div.find('.childB').append('<a href="#" style="background:green;" class="retour">Retour</div>');
                    div.find('.retour').click(function(){
                        changeContent();
                        return false;
                    });
                }
                else {
                    $(".plus").click(function(){
                        var name = $(this).attr("rel");
                        changeContent(name);
                        return false;
                    });
                }
            });
        });
    }
});

Answer 1

尝试使用fadeOut的回调函数清空并追加内容，使其在完成淡出之前不会被清空和追加：

div.fadeOut('fast',function(){
  div.empty().append(content).fadeIn('fast',function(){
    ...
  });
});

编辑：此外，您的主要问题是，使用.live('click')绑定到.plus类并且只执行一次，最好在$(document).ready()之外，但这需要重新排列。

$(document).ready(function(){
    var loader = $('#loading');
    var div = $("#provisoire");

    div.append($(".content:first").html()).css({'display':'block'});

    $(".plus").live('click',function(){
        var name = $(this).attr("rel");
        changeContent(name);
        return false;
    });
    $('.retour').live('click',function(){
      changeContent();
      return false;
    });

    function changeContent(name){
        var content = (name)?$("#"+name).html():$(".content:first").html();
        loader.fadeIn();
        $('html,body').animate({'scrollTop':0}, 600, function(){
            div.empty().append(content).fadeIn('fast', function(){ //*** here
                loader.fadeOut();
                if(name){
                    div.find('.childB').append('<a href="#" style="background:green;" class="retour">Retour</div>');
                }
            });
        });
    }
});

Answer 2

使用Tentonaxe的解决方案，尝试在以下行使用html或body：

 $('html').animate({'scrollTop':0}, 600, function(){

我认为同时定义html和body可能会调用两次回调函数。

使用fadeOut加倍div的数量

2 个答案: