jQuery，单击时连续调用多个动画答案

【问题标题】：jQuery, Calling multiple animations in a row on clickjQuery，单击时连续调用多个动画
【发布时间】：2012-09-23 11:47:20
【问题描述】：

到目前为止，我有它，所以当页面打开时，一些动画会运行以使一些图片和文本滑入视图，我在页面顶部有没有目的地的链接，但我已将它们全部链接用于样式目的例如对悬停，访问等的影响。链接有类，所有链接都有“导航”类，然后它们每个都有相关类“关于”，“联系”等。

我可以让索引页的内容在打开页面时向下滑动，并在单击“导航”类时向上滑动（不可见）。但是，我希望这样当单击“导航”类时，页面内容会滑出视图，并且取决于单击的链接（“关于”或“联系”链接），新内容会滑入视图中。

        $  (".about") .click(function() {
                $ (".aboutimage") .animate ( {
                marginTop : '-300px'
                }, 300) ;   
        });

当我将这个新的 jQuery 代码添加到“nav”（函数）的末尾时，我无法让新的页面内容（“about”或“contact”）向下滑动。我正在考虑某种 if 语句，但不确定我将如何去做，我已经尝试过并放弃了:-(。

我还在学校做一些课程的网站。我想要的效果是它只有一页。我对 jQuery 很陌生，所以我可能会走最长的路线，但是嘿。任何帮助将不胜感激。

$ (document).ready(function() { 
    $ (".imgtop") .ready(function() {
        $ (".imgtop") .animate ( {
        marginTop : '0px'
        }, 500) ;   
    });
    $ (".imgright") .ready(function() {
        $ (".imgright") .delay(200) .animate ( {
        marginLeft : '0px'
        }, 500) ;   
    });
    $ (".imgbot") .ready(function() {
        $ (".imgbot") .delay(400) .animate ( {
        marginTop : '0px'
        }, 500) ;   
    });
    $ (".texttop") .ready(function() {
        $ (".texttop") .animate ( {
        marginTop : '-20px'
        }, 500) ;   
    });
    $ (".texttop2") .ready(function() {
        $ (".texttop2") .delay(200) .animate ( {
        marginTop : '-20px'
        }, 500) ;   
    });
    $ (".texttop3") .ready(function() {
        $ (".texttop3") .delay(400) .animate ( {
        marginTop : '-20px'
        }, 500) ;   
    });


    $  (".nav") .click(function() {
        $ (".imgtop") .animate ( {
        marginTop : '-300px'
        }, 300) ;   

        $ (".imgright") .animate ( {
        marginLeft : '-550px'
        }, 300) ;   

        $ (".imgbot") .animate ( {
        marginTop : '-300px'
        }, 300) ;   

        $ (".texttop") .delay(200) .animate ( {
        marginTop : '-170px'
        }, 300) ;   

        $ (".texttop2") .delay(100) .animate ( {
        marginTop : '-170px'
        }, 300) ;   

        $ (".texttop3") .animate ( {
        marginTop : '-170px'
        }, 300) ;   

    });

    $  (".about") .click(function() {
        $ (".aboutimage") .animate ( {
        marginTop : '-300px'
        }, 300) ;   
            });
});

【问题讨论】：

您错误地使用了.ready() 方法。它只能在document 上调用。在文档以外的任何内容上调用它与 $(document).ready 完全相同，它不会查看您选择的元素。
这里的对象上的.ready是什么意思。它只对文档有效
这是我使脚本工作的唯一方法，如果我删除 .ready() 方法，脚本将无法工作，并且打开页面时图像不会向下滑动跨度>

标签： jquery animation

【解决方案1】：

删除$(".imgtop") .ready(function() {

.ready() 处理程序仅在文档上调用时有效..

.ready(function() 为每个对象然后尝试..

您的代码应如下所示

$(document).ready(function() {
    $(".imgtop").animate({
        marginTop: '0px'
    }, 500);
    $(".imgright").delay(200).animate({
        marginLeft: '0px'
    }, 500);
    $(".imgbot").ready(function() {
        $(".imgbot").delay(400).animate({
            marginTop: '0px'
        }, 500);
    });
    $(".texttop").animate({
        marginTop: '-20px'
    }, 500);
    $(".texttop2").delay(200).animate({
        marginTop: '-20px'
    }, 500);
    $(".texttop3").delay(400).animate({
        marginTop: '-20px'
    }, 500);

    // Your Click events here
});

【讨论】：

我已尝试删除 $(".imgtop") .ready(function() { 脚本行，但没有任何效果？