Hello everyone, I'm currently working on a CSS3 fullscreen slider. The issue I'm facing is that whenever I apply an image fadeOut effect, it suddenly disappears as if the hide() method has been triggered. Here's the code: CSS:
body {
margin: 0px;
}
#backgroundImageContainer {
height: 100%;
width: 100%;
position: fixed;
}
.backgroundImages {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
.animationZoomIN {
-webkit-transition: all 5.3s ease-out;
-moz-transition: all 5.3s ease-out;
-o-transition: all 5.3s ease-out;
transition: all 5.3s ease-out;
-moz-transform: scale(1.17);
-webkit-transform: scale(1.17);
-o-transform: scale(1.17);
transform: scale(1.17);
-ms-transform: scale(1.17);
}
#thumbsList {
position: absolute;
z-index: 2;
margin-top: 11px;
margin-right: 11px;
color: white;
font-family: verdana;
font-size: 13px;
list-style-type: none;
}
#thumbsList li {
float: left;
}
JavaScript:
$(document).ready(function() {
$('.backgroundImages').addClass('animationZoomIN');
$('.backgroundImages').bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
$('.backgroundImages').fadeOut(1000);});
});
HTML:
<div id="backgroundImageContainer">
<img class="backgroundImages" src="wallpaper-452100.png" />
</div>
<ul id="thumbsList">
<li>Steam Punk</li>
<li>Car</li>
</ul>
I noticed that the .backgroundImages fadeOut method is not functioning correctly, causing the image to disappear suddenly. Can anyone point out my mistake? Thank you.
Here's the Fiddle link: http://jsfiddle.net/4xymL/
The image may not be displaying properly, so please try using a sample image. Thank you for your help!