Удаление старого контента, загрузка нового контента, анимация нового контента с помощью JQuery - PullRequest
Новая
       16

Удаление старого контента, загрузка нового контента, анимация нового контента с помощью JQuery

1 голос
/ 27 февраля 2012

Я прошу прощения, что я очень новичок в JavaScript. У меня есть некоторые аспекты JQuery для улучшения дизайна моего веб-сайта, но я никогда не изучал основы или синтаксис.

Вот что я хочу сделать: когда пользователь нажимает на ссылку в списке #nav, div #content будет анимирован в верхней части экрана на высоту #content. Тогда #content будет скрыт. Затем #content будет заменено новым контентом, загруженным со страницы, на которую ссылается ссылка, по которой пользователь щелкнул в #nav. #content должен оставаться скрытым, а затем переместиться ниже экрана на высоту области просмотра. Затем #content будет отображаться и анимироваться обратно в исходное местоположение. Ниже приведен код, который я смоделировал, но он не работает должным образом.

Спасибо! 

$(document).ready(function() {

$('#nav li a').click(function(){

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

    var oldHeight = $('#content').css("height");

    var viewportHeight = $(window).height();

    $('#content').animate({
        top: "-" + oldHeight
    }, 'slow');

    $('#content').hide();

    $('#content').load(toLoad);

    $('#content').animate({
        top: viewportHeight + "px"
    });

    $('#content').show();

    $('#content').animate({
        top: "0px"
    }, 'slow');

    return false;

});

});

Ответы [ 2 ]

1 голос
/ 27 февраля 2012

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

$(function() {

    $('#nav li a').click(function(){

        //notice I used commas to separate the variable declarations, and I cached the `#content` selection since it will be used several times
        var toLoad         = $(this).attr('href') + ' #content',
            oldHeight      = $('#content').css("height"),
            viewportHeight = $(window).height(),
            $content       = $('#content');

        //animate the element out-of-view
        $content.animate({
            top : "-" + oldHeight
        }, 'slow', function () {

            //once the animation is complete, load the new data via AJAX
            $content.load(toLoad, function () {

                //once the AJAX request is complete, then animate the element back into view
                $content.animate({
                    top : "0px"
                }, 'slow');
            });
        });

        return false;

    });

});

Когда вы делаете это: 

    $('#content').animate({
        top: "-" + oldHeight
    }, 'slow');

    $('#content').hide();

Вы говорите, что требуется около 750 мс, чтобы оживить элемент вне поля зрения, но вы мгновенно говорите: «Дайте элемент display : none», так что элемент скрывается с .hide() до .animate() звонок заканчивается. Вот почему мы используем обратные вызовы.

Кроме того, если вы собираетесь запустить две или более функции на объекте jQuery, вам следует связать вызовы функций, а не повторно выбирать элемент (ы): 

    $('#content').animate({
        top: "-" + oldHeight
    }, 'slow').css({ color : '#fff' });
1 голос
/ 27 февраля 2012

То, что вы просите, чтобы все выполнялось после вашего load(), только когда он что-то загружает ...

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

из вашего примера просто поместите все после вашего load() внутри этого метода ...

конечный результат должен выглядеть следующим образом: 

var clickedAnchors = [];

$(document).ready(function() {

    $('#nav li a').click(function() {

        var toLoad = $(this).attr('href')+' #content';        
        var oldHeight = $('#content').css("height");        
        var viewportHeight = $(window).height();

        $('#content').animate({
            top: "-" + oldHeight
        }, 'slow', function() {

          $('#content').hide();        
          $('#content').load(toLoad, function() {


            $('#content').animate({
               top: viewportHeight + "px"
            });

            $('#content').show();        
            $('#content').animate({
                top: "0px"
            }, 'slow');

          }); // close load

        }); // close animate

        return false;

    }); // close selector
}); // close document.ready

Помните, что одна из лучших функций jQuery - это каскадирование, поэтому ваш код может выглядеть так: 

var clickedAnchors = [];

$(document).ready(function() {

    $('#nav li a').click(function() {

      var currentId = $(this).attr('id');

      if($.inArray(currentId, clickedAnchors) < 0) {
        // this anchor was not yet clicked

        var toLoad = $(this).attr('href')+' #content',        
            oldHeight = $('#content').css("height"),        
            viewportHeight = $(window).height();

        $('#content').animate({ top: "-" + oldHeight }, 'slow', function() {

            // after animated is completed
            $('#content')
                .hide()
                .load(toLoad, function() {    

                    $(this).animate( { top: viewportHeight + "px" }, function() {

                        // after animation has completed
                        $(this)
                           .show()
                           .animate({ top: "0px" }, 'slow');

                    });
                });
        });

        // remove this anchor from being clicked again,
        // so let's add it's id into the array
        clickedAnchors.push(currentId);
      }

      return false;

    });
});
...