CODEWITHSUNDEEP
jquerycss
MauF
MauF

Reputation: 451

removeAtt slowly with jQuery

I am using jQuery to select and manipulate SVG elements within the DOM. It's been tricky because I can do this adding or removing classes treating them as attributes.

Is it possible to remove an attribute using the animation effects from jQuery?

$('rect').mouseover(function(){    
    $(this).attr('class','selected');
});

$('rect').mouseout(function(){
    $(this).removeAttr('class');
});

Upvotes: 2

Views: 1120

Answers (2)

MauF
MauF

Reputation: 451

Strangely, .addClass, .removeClass .toogleClass won't work in this context. I yet have to read if that's because I'm using SVG or what.

I got close to what I wanted via CSS, though:

.selected {
    fill: orange;
    -moz-transition: fill easeout .5s;
}

Thank you for your help.

UPDATE:

This link was quite helpful as well: jQuery SVG, why can't I addClass?

Upvotes: 0

Siva Charan
Siva Charan

Reputation: 18064

Use slideUp() or slideDown()

$(this).slideUp().removeAttr('class');

Update:

$(this).slideUp().removeAttr('class').slideDown();

For this you will see some more effect

Refer LIVE DEMO

Still you can do some more effects, for now I got this idea

Update 2:

You can do using fadeIn() and fadeOut() too.

$(this).fadeOut('slow').removeAttr('class').fadeIn('slow');

Refer LIVE DEMO - 2

Upvotes: 2

Related Questions