Question

我正在使用jQuery来选择和操作DOM中的SVG元素。它很棘手，因为我可以添加或删除将它们视为属性的类。

是否可以使用jQuery中的动画效果删除属性？

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

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

Answer 1

使用 slideUp() 或 slideDown()

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

更新

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

为此你会看到更多效果

参考 LIVE DEMO

你仍然可以做更多的效果，现在我有了这个想法

更新2：

您也可以使用 fadeIn() 和 fadeOut() 。

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

Answer 2

奇怪的是，。addClass，.removeClass .toogleClass在此上下文中不起作用。如果那是因为我正在使用SVG或者是什么。我需要阅读。

尽管如此，我接近了我想要的东西：

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

感谢您的帮助。

更新：