Пытается связать две функции jQuery

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

С callbackFunction из viewportChecker вы можете использовать такой код:

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

здесь как функция будет выполняться на объекте $('selector')

Для дальнейшего чтения, имеют вид here

Артикул

viewportchecker Options

Answer 2

Спасибо за знание! Код Эмпирика работает, но есть две div и две кнопки, поэтому к тому моменту, когда второй div войдет в окно просмотра, его кнопка уже анимирована.

Невозможно создать две функции, по одному для каждого div, есть ли способ анимировать вторую кнопку только после того, как родитель станет видимым? Может быть, что-то вроде «если родитель видимый, затем кнопка анимации». Вот моя попытка ... не работает.

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

Просто жаль, что я не знал синтаксиса лучше!