jQuery .load () с эффектом исчезновения

Question

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

$('.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;
    });

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

Answer 1

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

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

Answer 2

Только так:

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

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

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

Answer 3

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

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

Answer 4

При использовании 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().

Answer 5

Я обнаружил, что что-то вроде этого работает хорошо ...

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

Answer 6

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

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