Question

尝试将两个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，但不起作用。

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

Answer 1

使用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

Answer 2

感谢您的知识！ 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); 
           }
        }
    });   
});

希望我更好地了解语法！

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

2 个答案: