I have been working on a jQuery code that needs to run just before a specific div is displayed on the page. Take a look at the snippet below as an example of what I am trying to achieve:
$(document).ready(function(){
$('.article').on('mouseenter', function(){
$(this).css('background-color', "#ec5252").fadeTo('medium', 0.8);
$(this).find('.articleHead h1').css('color', '#ffffff');
$(this).find('.articleDetails p').css('color', '#ffffff');
}).on('mouseleave', function(){
$(this).css('background-color', '#ffffff').fadeTo('medium',1.0);
$(this).find('.articleHead h1').css('color', '#414141');
$(this).find('.articleDetails p').css('color', '#a2a2a2');
}).on('click', function(){
var id = $(this).attr('data-id');
$(location).attr('href','article.php?articleId='+id);
}).on('beforeShow', function(){
alert('about to show');
}).on('afterShow', function(){
alert('just shown');
});
});
Even though I have set up event handlers for various actions related to the .article class, I am struggling to make the code work specifically for executing actions just before and after each .article div appears on the web page. The beforeShow and afterShow events are not functioning as expected. If you have any insights or suggestions, please let me know!