I am currently working on a slideshow application using jquery.transit. My goal is to hide a photo after its display animation by setting the properties of display, transform, and translate to 'none' value. Although the slideshow application works properly, I noticed that 'display: none' is not set in the JavaScript console when using Chrome. After some experiments, I discovered a workaround by setting it twice in my code.
function showPhoto() {
photo_list[counter]
.css({
scale : 2,
display : 'inline'
})
.transition({
opacity : 1
}, 1000)
.transition({
x : '+=20',
y : '+=30',
scale: 2.3
}, 1500)
.transition({
opacity: 0
}, 500, 'linear', function() {
$(this)
.css({
diaplay : 'none',
transform : 'none',
translate : 'none',
x : 0,
y : 0,
scale : 1
});
$(this).css({display: 'none'}); // although redundant, it works
incrDomIndex();
showPhoto();
});
};
The photo_list variable is an Array object containing DOM elements with the class below:
.photo {
position : absolute;
top : 0;
left : 0;
width : 800px;
height : 500px;
}