Reputation: 251
I am trying to swap b/w few images using jquery. There are couple of ways to do so ...
Is there any better or different solution for the same .... ?
Upvotes: 0
Views: 10627
Reputation: 6184
Use Jquery.Cycle
Jquery.cycle can be set up like this
$('.slides').cycle({
fx: 'scrollHorz',
speed: 400,
timeout: 0});
Upvotes: 1
Reputation: 89626
It depends on your requirements. If your images are of different sizes (aspect ratios), yes, the only solution is to stack two images on top of each other and fade in/out at the same time.
If your images have the same size, there's a nicer solution which I've used in the past. You take two nested <div>
s:
<div><div></div></div>
From CSS set their width/height to the width/height of your images and do the following from JavaScript:
This way, you're only fading one element (so it's fast), but you get a really nice effect. Make sure to preload your images for a seamless experience.
Upvotes: 2
Reputation: 2784
Have both the images in same place with position attribute of css to absolute. then try
$('#image1').fadeOut('slow');
$('#image2').fadeIn('slow');
Upvotes: -1