I want a simple div to fade in and move simultaneously. Suppose there is a hidden image at the top and when I click a buton the image should come in the center of the page with fading in effect.
but for me it fades in first and then starts moving...
$('#shelf').fadeIn('fast').animate({
'bottom': '54%'
}, 'slow', function() {
// Animation complete.
});
: a gradual increase in a motion-picture or television image's visibility at the beginning of a sequence.
The Fade In/Fade Out behavior lets you dissolve into and out of any object by ramping the opacity of the object from 0 percent to 100 percent at the start, and then back to 0 percent at the end.
A recorded song may be gradually reduced to silence at its end (fade-out), or may gradually increase from silence at the beginning (fade-in). Fading-out can serve as a recording solution for pieces of music that contain no obvious ending.
Try this
$('#shelf').fadeIn('fast').animate({
'bottom': '54%'
}, {duration: 'slow', queue: false}, function() {
// Animation complete.
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With