jQuery，在点击连续调用多个动画

到目前为止，我拥有它，所以当页面打开时，一些动画运行，使一些图片和文字滑入视图中，我有链接在页面的顶部没有目的地但我已经使他们的所有链接为造型目的，例如对悬停，访问等的影响。链接有类，所有链接都有“导航”类，然后他们每个都有相关类“约”，“联系”等。jQuery，在点击连续调用多个动画

我可以得到它，以便在打开页面时索引页面的内容向下滑动，并在单击“导航”类时滑回（超出视图）。但是，我希望它能够在单击“导航”类时，页面内容滑出视图，并根据点击的链接（“关于”或“联系”链接）将新内容滑入视图。

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

当我的jQuery的新位添加到“导航”（功能）结束时，我无法获得新的内容（“约”或“接触”）滑下来。我正在考虑某种如果陈述，但不知道我会如何去做这件事，我已经尝试过，并试图放弃:-(。

我仍然在学校，并做一些课程的网站。我要去的是事实，它只会有一个页面，我是很新的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) ; 
      }); 
});

来源

2012-10-02 Cameron Reekie

您正在使用'。就绪（）'方法不正确。它只能在'document'中调用。在文档以外的任何其他地方调用与$（document）.ready完全相同，它不会查看您选择的元素。 –

这是什么意思。准备在这里的一个对象..它只对一个文件有效 –

这就是我可以使脚本工作的唯一方法，如果我删除.ready（）方法脚本不起作用，并且在打开页面时图像不会滑落 –

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

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

。就绪（函数（）为每个对象，然后尝试..

你的代码看起来应该是这样

$(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 
});

来源

2012-10-02 15:40:10

我试过删除 $（“。imgtop”）.ready（function（）{ 脚本行，但是它们都不起作用？ –

jQuery，在点击连续调用多个动画

回答

相关问题