Below is the code I am working with:
https://jsfiddle.net/c4zquo60/1/
CSS:
#bg {
background-repeat: no-repeat;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
width:100wh;
height:100vh;
z-index: -1;
opacity: 0;
transition: opacity .25s ease-in-out;
}
jQuery
$(function() {
$('#triggerModel').hover(function () {
$("#bg").css({'opacity':0});
$("#bg").css({'background-image': "url('backgroundModel.jpg')"});
$("#bg").css({'opacity':1});
});
});
$(function() {
$('#triggerArt').hover(function () {
$("#bg").css({'opacity':0});
$("#bg").css({'background-image': "url('backgroundArt.jpg')"});
$("#bg").css({'opacity':1});
});
});
$(function() {
$('#triggerDev').hover(function () {
$("#bg").css({'opacity':0});
$("#bg").css({'background-image': "url('backgroundDev.jpg')"});
$("#bg").css({'opacity':1});
});
});
My understanding of coding tells me that each line should execute sequentially. For example, shouldn't it set the opacity to 0 first with $("#bg").css({'opacity':0});, then change the background image with
$("#bg").css({'background-image': "url('backgroundModel.jpg')"});When the page loads, according to the CSS code, the background image has an opacity of 0 and no actual image loaded. Upon hovering over the element, it animates as expected. However, when I hover over another one of the three nav elements, the opacity easing is ignored and it immediately switches to the next background image.
Is there a way to make jQuery follow instructions in sequence? Should I introduce a delay between functions to allow for transitions? Or is jQuery failing to recognize the transition in the CSS code after the initial execution?