jquery - 用 jQuery 慢慢地 removeAtt

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();

为此，您将看到更多效果

参考现场演示

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

更新 2：

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

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

参考现场演示 - 2

Answer 2

奇怪的是，.addClass、.removeClass .toogleClass 在这种情况下不起作用。如果那是因为我使用的是 SVG 还是什么，我还需要阅读。

不过，我通过 CSS 接近了我想要的东西：

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

谢谢您的帮助。

更新：

这个链接也很有帮助：jQuery SVG，Why can't I addClass?