Блог

У меня есть этот ajax-сайт, через который загружаются страницы load() , но как мне добавить переход? Простое затухание fadeIn уже было бы неплохо.

Это код, который я использую для его загрузки (плюс индикатор загрузки).

Я хочу, чтобы текущая страница (просто контейнер) исчезала, а новая появлялась с исчезновением

 $(document).ready(function() {
    $('a').click(function(event) {
        $("#container").append('<div id="loading">Loading...</div>');
        event.preventDefault();
        var url = $(this).attr('href');
        $('div#container').load(url, function() { $("#loading").fadeOut() });
    });
});
  

Вам нужно что-то более мелкозернистое, чем .load() , чтобы вы могли сделать это fadeOut() перед вставкой нового содержимого:

 $(function()
{
    var $container = $('#container');

    $('a').click(function()
    {
        $container.html('<div id="loading">Loading...</div>');

        var url = $(this).attr('href');

        $.get(url, function (data)
        {
            $("#loading").fadeOut(function()
            {
                // without this the DOM will contain multiple elements
                // with the same ID, which is bad.
                $(this).remove();

                $container.hide().html(data).fadeIn();
            });
        });

        return false;
    });
});
  

(Очень простая) демонстрация:http://jsfiddle.net/mattball/Cgqbx

Если вы пытаетесь вводить и удалять содержимое, может быть полезно анимировать атрибут opacity, а не полностью скрывать элемент, чтобы сохранить высоту контейнера.

 $(document).ready(function() {
    $('a').click(function(event) {
        $("#container").animate({'opacity': 0}, 200);
        event.preventDefault();
        var url = $(this).attr('href');
        $('div#container').load(url, function() {
            $(this).animate({'opacity': 1}, 200);
        });
    });
});
  

Убедитесь, что у вас есть html-разметка, примерно такая:

 <div id="container">
    <div id="content"></div>
</div>
  

css:

 #loading { display:none }
  

Затем с помощью простого jQuery вы сможете разобраться в этом:

 $(function() {
    $('a').click(function(e) {

        e.preventDefault();

        var url = $(this).attr('href');
        var content = $('#content');

        content.fadeOut(400, function() {

            $("#container").append('<div id="loading">Loading...</div>');

            var loading = $('#loading');

            loading.fadeIn(400, function() {
                content.load(url, function() { 
                    loading.fadeOut(400, function() {
                        $(this).remove();
                        content.fadeIn(400);
                    });
                });
            });   
        });
    });
});
  

Имеет смысл?

редактировать: немного изменен.