到目前为止,我已经做到了,所以当页面打开时,一些动画会运行以使一些图片和文本滑入视图中,我在页面顶部有链接,这些链接没有目的地,但我已将它们全部链接用于样式目的,例如效果悬停、访问等。链接有类,所有链接都有“nav”类,然后它们每个都有相关类“about”、“contact”等。
我可以得到它,以便索引页面的内容在页面打开时向下滑动,并在单击“nav”类时向上滑动(超出视图)。但是,我希望这样当单击“导航”类时,页面内容会滑出视图,并且根据单击的链接(“关于”或“联系”链接),新内容会滑入视图。
$ (".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) ;
});
});