试图将两个jQuery函数链接在一起

时间:2015-02-23 15:10:21

标签: jquery

尝试将两个jQuery链接在一起,所以第二个只在第一个之后发生。

第一个函数隐藏div,直到它超过视口底部250px。

$(document).ready(function() {
    $('#cta1,#cta2').addClass("hidden").viewportChecker({
        classToAdd: 'visible animated fadeInDown',
        offset: 250    
       });   
}); 

第二个功能为该div中的按钮设置动画。

    $(function(){
    $('.button').animate({"margin-right":"100px"}, 1000);
});

我试图将它们链接起来......

$(document).ready(function() {
    $('#cta1,#cta2').addClass("hidden").viewportChecker({
        classToAdd: 'visible animated fadeInDown', // Class to add to the elements when they are visible
        offset: 250    
       }).$('.button').animate({"margin-right":"100px"}, 1000);   
});

代码通过Lint,但不起作用。

尝试学习任何帮助非常感谢!

2 个答案:

答案 0 :(得分:0)

使用viewportChecker的callbackFunction,您可以使用以下代码:

$(document).ready(function() {
    $('#cta1,#cta2').addClass("hidden").viewportChecker({
        classToAdd: 'visible animated fadeInDown',
        offset: 250,
        callbackFunction: function(elem, action){
               $('.button').animate({"margin-right":"100px"}, 1000); 
               // Callback to do after a class was added/ removed to an element.
           } 
       });   
});

此外,代码中存在语法错误。你不能写

$('selector').function().$('selector1').function();

必须是:

$('selector').function().function();

这里两个函数都将在Object $('selector')

上执行

如需进一步阅读,请查看here

<强>参考

viewportchecker Options

答案 1 :(得分:0)

感谢您的知识! Empiric的代码有效,但有两个div和两个按钮,所以当第二个div进入视口时,它的按钮已经动画了。

除了制作两个函数(每个div一个函数)之外,还有一种方法可以在父级变为可见之后为第二个按钮设置动画吗?也许类似于&#34;如果父亲是可见的,那么动画按钮。&#34;这是我的尝试......没有工作。

$(document).ready(function() {
    $('#cta1,#cta2').addClass("hidden").viewportChecker({
        classToAdd: 'visible animated fadeInDown',
        offset: 250,
        callbackFunction: function(elem, action){
        if (('.button').parent().hasclass('visible')) {
               $('.button').animate({"margin-right":"100px"}, 1000); 
           }
        }
    });   
});

希望我更好地了解语法!