CODEWITHSUNDEEP
jquery
user2045937
user2045937

Reputation: 197

Slide images instead of fading in

I've made a simple image gallery where the images fadeIn as the thumb image clicked. What I am trying to change is as the thumb image clicked the requested gallery image doesn't fadeIn but slides to the left/right.

http://jsfiddle.net/TfEn4/

$('.fotos').not(':first').hide();
$('.info').not(':first').hide();

$('.gal-links ul li a').click(function() {
    var activeLink = $(this).attr('href');
    $('.info').hide();
    $('.gal-links ul li a').removeClass('active');
    $(this).addClass('active');
    $('.fotos').hide();
    $(activeLink).fadeIn('slow');
    $('.info').fadeIn('slow');
    return false;
});

How should I change my code for this? Animate and positioning is the right way?

Upvotes: 0

Views: 512

Answers (1)

Anupam
Anupam

Reputation: 8016

Use Jquery UI's slide effect or use animate() method for width property

$(activeLink).toggle( "slide" );

Here is a fiddle for slide effect.

For using animate method you can do like this

$(activeLink).show('slide', {direction: 'right'}, 1000);

and for hiding

$(activeLink).hide('slide', {direction: 'left'}, 1000);

Upvotes: 2

Related Questions