删除旧内容，加载新内​​容，使用JQuery为新内容添加动画效果

Question

我很抱歉我非常喜欢使用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;

});

});

Answer 1

您要求它在load()之后执行所有内容时才会加载某些内容......

load()是异步的，您可以在jQuery website中看到该方法的完整签名，其中它表示您可以附加function，当加载完成时会触发该load()。 / p>

从您的示例中将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 放在该方法之后...

最终结果如下：

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;

    });
});

请记住，jQuery的一个更好的功能是级联，所以你的代码实际上可能是这样的：

{{1}}

Answer 2

您需要为动画使用回调函数，以便按顺序触发：

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