CODEWITHSUNDEEP
jquerycssjquery-animate
Mike Rifgin
Mike Rifgin

Reputation: 10745

Animating td's using jquery

I'm trying to animate the opacity of td's using jquery. When one td is clicked upon I want to animate any td's out and fade in the td that's been clicked on.

I'm getting a strange problem with flickering:

http://jsfiddle.net/s4gtp/

The td being clicked on fades in but then quickly fades in and out again. I've checked firebug and the event is only being fired once. I've tried the same code with an un-ordered list and everything works as expected.

Any ideas why this might be happening?

Upvotes: 1

Views: 1842

Answers (1)

BenM
BenM

Reputation: 53198

Try adding in .not($(this)) to the first animation:

$('tr td').click(function() {
    var i = $(this).index();
    $('tr td').not($(this)).animate({'opacity': '0.1'});
    $('tr td.item' + i).animate({'opacity': "1"});
});

Also, you need to specify border-collapse:separate; in your CSS for the table. This will resolve the issue you have in Firefox:

Here's an updated jsFiddle for you > http://jsfiddle.net/s4gtp/4/

As the other commenters have stated though, I didn't see any 'flickering', so I assume you mean that the clicked element fades out, and then fades back in...

Upvotes: 1

Related Questions