CODEWITHSUNDEEP
jquery
code-8
code-8

Reputation: 58662

How to load different image with smooth transition using jQuery?

Here is my layout :

enter image description here

How would I achieve something like that in jQuery ?

Here is my live Result : Fiddle

Upvotes: 0

Views: 78

Answers (2)

tic
tic

Reputation: 2512

I tried using $('img #bot-image-path ').slideDown(1000);, but that doesn't seem to take any effect.

$('img #bot-image-path ') Will select a div with id #bot-image-path inside of any image in your window, which would be invalid html. You likely just mean $('#bot-image-path')

Instead of sliding...You can do a fade of 2 images asynchronously, with a simple example (Click the cats):

JSFiddle

Upvotes: 0

AboutTime
AboutTime

Reputation: 317

Maybe using something like the following?

[selector].show( speed, [callback] );

This will fade in the image over 'speed' ms. Callback isnt necessary. You can read more about it here, http://www.tutorialspoint.com/jquery/jquery-effects.htm.

Edit: Also, removing the 'img' in front of the actual div id might help!

Upvotes: 1

Related Questions