jQuery的，调用多个动画在单击某一行 [英] jQuery, Calling multiple animations in a row on click
问题描述
到目前为止，我有它的页面打开运行做出一些图片和文字滑下进入查看一些动画所以当我在这没有目的地的页面顶部链接，但我已经让他们对造型的目的各个环节如悬停效果，参观等环节都阶级，各个环节都有了导航类，然后他们各自有相对有班左右，接触等。
我能得到它，以便对索引页内容滑下时，页面被打开，滑动备份（拿出来看）被点击了导航类时。不过，我想它，因此导航类点击页面内容滑出视的角度，当在其上点击链接（约或联系链接）新的内容滑下进入视野。
$（。关于）。点击（函数（）{
$（.aboutimage）.animate（{
marginTop：-300px
}，300）;
}）;
在我的jQuery的新位添加到导航（功能）结束时，我无法获得新的页面内容（约或接触）滑下。我想到某种的if语句，但不知道我怎么会去这件事，我已经试了又试，并给予了:-(。
我还在学校，以及为某些课程网站。我要去的效果是实际上将只有一个页面。我很新的jQuery的，所以我可能将最长的路线这一轮，但嘿。任何帮助将大大AP preciated。
$（文件）。就绪（函数（）{
$（.imgtop）。就绪（函数（）{
$（.imgtop）.animate（{
marginTop：0像素
}，500）;
}）;
$（.imgright）。就绪（函数（）{
$（.imgright）.delay（200）.animate（{
marginLeft：0像素
}，500）;
}）;
$（.imgbot）。就绪（函数（）{
$（.imgbot）.delay（400）.animate（{
marginTop：0像素
}，500）;
}）;
$（.texttop）。就绪（函数（）{
$（.texttop）.animate（{
marginTop：'-20px'
}，500）;
}）;
$（.texttop2）。就绪（函数（）{
$（.texttop2）.delay（200）.animate（{
marginTop：'-20px'
}，500）;
}）;
$（.texttop3）。就绪（函数（）{
$（.texttop3）.delay（400）.animate（{
marginTop：'-20px'
}，500）;
}）;
$（.nav）。点击（函数（）{
$（.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）; }）; $（。关于）。点击（函数（）{
$（.aboutimage）.animate（{
marginTop：-300px
}，300）;
}）;
}）;
删除 $（。imgtop）。就绪（函数（）{
。就绪（）的文档称为只有当处理程序是有效的。
。就绪（函数（）为每个对象，然后尝试..
您code应该是这样的。
$（文件）。就绪（函数（）{
$（。imgtop）。动画（{
marginTop：0像素
}，500）;
$（。imgright）。延迟（200）.animate（{
marginLeft：0像素
}，500）;
$（。imgbot）。就绪（函数（）{
$（。imgbot）。延迟（400）.animate（{
marginTop：0像素
}，500）;
}）;
$（。texttop）。动画（{
marginTop：'-20px'
}，500）;
$（。texttop2）。延迟（200）.animate（{
marginTop：'-20px'
}，500）;
$（。texttop3）。延迟（400）.animate（{
marginTop：'-20px'
}，500）; //你点击这里事件
}）;
So far I have it so when the page opens some animations run to make some pictures and text slide down into view, I have links at the top of the page which have no destinations but I have made them all links for styling purposes e.g effects on Hover, Visited etc. The links have classes, all links have the "nav" class and then they each have there relative classes "about" , "contact" etc.
I could get it so that the content for the index page slid down when the page was opened, and slide back up (out of view) when a "nav" class was clicked. However, I want it so that when a "nav" class is clicked the page content slides out of view and depending on which link was clicked ("about" or "contact" links) the new content slides down into view.
$ (".about") .click(function() {
$ (".aboutimage") .animate ( {
marginTop : '-300px'
}, 300) ;
});
When I add this new bit of jQuery to the end of the "nav" (function) I cannot get the new page content ("about" or "contact") to slide down. I am thinking of some sort of if statement but not sure how i would go about this and i have tried and tried and given up :-(.
I am still at school and making a website for some coursework. The effect I'm going for is the fact it will only have one page. I am very new to jQuery so I am probably going the longest route round this but hey. Any Help would be greatly appreciated.
$ (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) ;
});
});
Remove the $(".imgtop") .ready(function() {
.ready() handler is valid only when called on the document..
.ready(function() for each object and then try..
Your code should look like this
$(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
});
这篇关于jQuery的，调用多个动画在单击某一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
