My Wordpress site features some animations that work flawlessly when the site is scrolled. The code looks like this:
jQuery(document).ready(function($){
$(window).scroll( function(){
if(!isMobile) {
$('.animate_1').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if( bottom_of_window > bottom_of_object ){
$(this).animate({opacity:'1', margin: '0 3% 0 3%'},2000, 'easeInOutQuart');
}
})
}
});
});
The above code works perfectly fine. However, I now want to animate a different class ".animate_2" immediately upon site load, without any scrolling or clicking involved. I attempted it using the following code:
jQuery(document).ready(function($){
$('.animate_2').animate({opacity:'1', margin: '0 3% 0 3%'},2000, 'easeInOutQuart');
});
Unfortunately, this did not work as expected. Chrome showed an error stating that "$" is undefined or something along those lines.
Does anyone have any thoughts on how I can achieve this animation without requiring scrolling?