2

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');
});
MauF
  • 461
  • 4
  • 17
  • 2
    Should be using `.addClass()` and `.removeClass` .. or better yet, `toggleClass()`. – tymeJV Apr 22 '13 at 16:15
  • You can't animate the `removeAttr` , although you can animate the effect of removeAttr. – Adil Shaikh Apr 22 '13 at 16:16
  • You would need to animate the css properties to what they would be with the class removed. – Reinstate Monica Cellio Apr 22 '13 at 16:16
  • No, that would imply that you can *half* remove an attribute, or 25% remove an attribute, or 10% add an attribute. You can't fractionally add or remove attributes. If you want something to animate, it needs to be something that can smoothly transition between states. The presence/absence of an attribute has only two states. – user229044 Apr 22 '13 at 16:17
  • If you try the addClass, removeClass methods within a tag you'll see they don't work as they do with divs. This is the reason I am using .attr instead. – MauF Apr 22 '13 at 17:14

2 Answers2

2

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

Siva Charan
  • 17,940
  • 9
  • 60
  • 95
0

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?

Community
  • 1
  • 1
MauF
  • 461
  • 4
  • 17