JQuery.load() с эффектом fadeIn

Я пытаюсь загрузить #content url через AJAX, используя jQuery в #primary. Он загружается, но не fadeIn. Что я делаю не так?

$('.menu a').live('click', function(event) {
        var link = $(this).attr('href');
        $('#content').fadeOut('slow', function(){
            $('#primary').load(link+' #content', function(){
                $('#content').fadeIn('slow');
            });
        });
        return false;
    });

Большое спасибо за вашу помощь.

Ответы

Ответ 1

На самом деле я смог сделать это, применив эффект к обертке div вместо...

$('#primary').fadeOut('slow', function(){
    $('#primary').load(link+' #content', function(){
        $('#primary').fadeIn('slow');
    });
});

Ответ 2

Только это:

$('.element').load('file.html',function(){}).hide().fadeIn();

Или добавить это поведение по умолчанию в функцию load():

$.fn.load_=$.fn.load;
$.fn.load=function(){
    return $.fn.load_.apply(this,arguments).hide().fadeIn();
}

Ответ 3

При использовании load() jQuery внутренне использует html() для обновления вашего элемента. Это означает, что вы не можете применить к нему какую-либо анимацию, поскольку вы просто обновляете свойство innerHTML этого элемента.

Вместо этого вам нужно будет написать свой собственный запрос AJAX, чтобы получить новый HTML, поместить его в элемент, а затем вызвать fadeIn().

$('.menu a').live('click', function(event) {
    var link = $(this).attr('href');

    $('#content').fadeOut('slow', function() {
        $.get(
            link +' #content', 
            function(data) {
                $("#primary").html(data).fadeIn('slow');
            }, 
            "html"
        );
    });
    return false;
});

Я использовал get() здесь, но вы могли бы легко использовать post() или ajax().

Кроме того, просто отметить, live() устарел. Вместо этого вы должны использовать delegate() или, если вы используете jQuery 1.7+, on().

Ответ 4

Я нашел, что делать что-то подобное хорошо работает...

$( '# Div') Затухание (0).fadeIn() нагрузка ( 'foo.blah.html');..

Ответ 5

Вы также можете использовать .load() в эффекте затухания, подобном этому

$("#container").fadeOut("slow").load('data.html').fadeIn('slow');

Ответ 6

Это лучший способ естественного исчезновения/извлечения, сначала вы спрячете свой контейнер, затем загрузите свою страницу в этом контейнере (она будет загружена, но скрыта), а затем просто используйте функцию JQuery.fadeIn(), и она будет покажите ему специальный эффект.

$(".myClass").click(function () 
{
    $("#Container").hide();
    $("#Container").load("magasin.html");
    $("#Container").fadeIn(); 
});