Currently, I am utilizing code to swap out images and toggle classes using jQuery when a specific element is clicked. The issue arises when clicking the element for the second time; it seemingly repeats the same actions as the first click event, despite being triggered based on added or removed classes.
To see this in action, simply locate where the cursor changes into a pointer towards the bottom middle of the screen. Click on that point, and you will notice a button move up to align with the cursor. Upon clicking this button, there will be a fading effect, although the same image appears again, causing confusion.
If you have any insights or solutions, please share!
//on arrow up click
//fade page out
//replace with open nav
$('.arrow_up').bind('click',function() {
$('.bg').fadeOut(500);
setTimeout(function(){
$('.bg').attr('src', 'other_files/images/bg_open_nav.png');
}, 500);
$('.bg').fadeIn(500);
$('.arrow').removeClass('arrow_up').addClass('arrow_down');
});
//on arrow down click
//fade page out
//replace with closed nav
$('.arrow_down').bind('click',function() {
$('.bg').fadeOut(500);
setTimeout(function(){
$('.bg').attr('src', 'other_files/images/bg.png');
}, 500);
$('.bg').fadeIn(500);
$('.arrow').removeClass('arrow_down').addClass('arrow_up');
});