Testing for Garavani
This seems to work perfectly. I'm not sure what you did wrong. Perhaps your version of jQuery or jQuery UI was corrupted? Or perhaps you didn't correctly set the initial state of the elements (which I have done in the CSS pane of this fiddle)?
by alano
HTML
<div id = "menu">
<div id="Collection" class="item firstleft">
<img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" alt="logo"/>
<p class = "titles">
<img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" alt="logo"/>
<img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" alt="logo"/>
<img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" alt="logo"/>
<img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png"/>
</p>
</div>
<div id="Recherche" class="item secondleft">
<img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" alt="logo"/>
</div>
<div id="Corporate" class="item secondright">
<img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" alt="logo"/>
</div>
<div id="Contact" class="item firstright">
<img src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png" alt="logo"/>
</div>
</div>
<input type="button" value="Cycle" onclick="cycle()" />
CSS
img {
height: 50px;
width: 50px;
display: none;
}
input {
display: none;
}
JavaScript
$(document).ready(function() {
$('.titles img:first').delay(500).animate({
opacity: 1,
top: '24px',
height: 'show'
}, 950, 'easeOutBack');
$('input').delay(5000).show();
});
function cycle() {
$('.titles img').hide(); //hide all images
$('.titles img').each(function(idx) {
$(this).delay(idx * 1000).animate({
opacity: 1,
top: '24px',
height: 'show'
}, 950, 'easeOutBack');
});
}