Sunday, February 1, 2009

[jQuery] Clickable slideshow not working as expected.

Using the hover function, I'm showing a before/after version of a
photo (I have 2 photos stacked using z-index):

$(function() {
$('.current img.after').hover(
function() {
$(this).animate({opacity: "0"});
},
function() {
$(this).animate({opacity: "1"});
});

When an image is clicked it proceeds to the next image, using the
removeClass and addClass functions:

$('.current').click(function() {
$(this).removeClass('current').addClass('invisible');
$(this).next('div').removeClass('invisible').addClass
('current');
});

This works fine, but after clicking I lose the hover function. Not
sure why... Here's a bare-bones example:
http://adamkobrin.com/retouchBA2.html

Thanks.

No comments: