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

Question

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

我可以得到它，以便索引页面的内容在页面打开时向下滑动，并在单击“nav”类时向上滑动(超出 View )。但是，我希望这样当单击“导航”类时，页面内容会滑出 View ，并且根据单击的链接(“关于”或“联系”链接)，新内容会滑入 View 。

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

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

我还在学校，正在为一些类(class)制作一个网站。我想要的效果是它只有一页。我对 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) ;   
            });
});

Answer 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
});​