используя fadeOut удваивает число div - PullRequest
Новая
       15

используя fadeOut удваивает число div

1 голос
/ 06 сентября 2011

У меня проблема с fadeOut(). Мои <div> умножаются на два, если я использую fadeOut(), но если я просто заставлю <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;
                    });
                }
            });
        });
    }
});

Ответы [ 2 ]

1 голос
/ 06 сентября 2011

Используя решение Tentonaxe, попробуйте использовать html или body в следующей строке: 

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

Я думаю, что определение html и body может вызвать функцию обратного вызова дважды.

1 голос
/ 06 сентября 2011

попробуйте использовать функцию обратного вызова fadeOut, чтобы очистить и добавить контент таким образом, чтобы он не очищался и не добавлялся до того, как закончится затухание: 

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

Редактировать: Кроме того, ваша основная проблема - привязать класс .plus с помощью .live('click') и сделать это только один раз, предпочтительно за пределами $(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>');
                }
            });
        });
    }
});
...