jQuery，单击时连续调用多个动画
到目前为止我已经拥有它，所以当页面打开一些动画运行以使一些图片和文本向下滑入视图时，我在页面顶部有没有目的地的链接但是我已经为了样式目的制作了所有链接，例如效果hover，访问等。链接有类，所有链接都有“nav”类，然后他们每个都有相关的类“约”，“联系”等。
我可以得到它，以便在打开页面时索引页面的内容向下滑动，并在单击“nav”类时向上滑动（在视图外）。 但是，我希望它能够在单击“nav”类时将页面内容滑出视图，并根据单击的链接（“about”或“contact”链接）将新内容向下滑入视图。
$ (".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) ; }); });
删除$(".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 });