Question

我正在使用jQuery和SVG元素在悬停事件上创建漂亮的动画：

HTML：

<div class="chart-picker">
  <svg id="user-radio" class="radio" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25px" height="25px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve" onclick="activeUserChart()">
    <circle id="center" fill="#F08541" cx="15" cy="15" r="5.733"/>
    <circle id="circle" fill="none" stroke="#F08541" stroke-width="4" stroke-miterlimit="10" cx="15" cy="15" r="11.877"/>
  </svg>
  Active Users
</div>

JS：

$('svg.radio').each(function() {
  if (!($(this).attr('class').indexOf('active') > -1))
    $(this).find('#center').attr('fill', '#fff');
})

$('.chart-picker').hover(function() {
  if (!($(this).find('.radio').attr('class').indexOf('active') > -1))
    $(this).find('#center').attr('fill', '#F08641');
}, function() {
  if (!($(this).find('.radio').attr('class').indexOf('active') > -1))
    $(this).find('#center').attr('fill', '#fff');
})

它工作正常然而我想在这里添加一个过渡，内圈在外圈渐渐消失。最优雅的方式是什么？我应该坚持使用jQuery还是使用d3.js？

这是jsfiddle：

http://jsfiddle.net/2vDue/

非常感谢

Answer 1

这里是淡入淡出的小提琴：http://jsfiddle.net/2vDue/1/

这是js：

$('svg.radio').each(function() {
  if (!($(this).attr('class').indexOf('active') > -1))
    $(this).find('#center').hide();
})

$('.chart-picker').hover(function() {
  if (!($(this).find('.radio').attr('class').indexOf('active') > -1))
    $(this).find('#center').fadeIn();
}, function() {
  if (!($(this).find('.radio').attr('class').indexOf('active') > -1))
    $(this).find('#center').fadeOut();
})

编辑：忘记那个隐藏的CSS东西 - 我要记住falIn来隐藏/显示中心元素。

Answer 2

你真的不需要Javascript / jQuery，你可以在transition使用CSS hover：

演示：http://jsfiddle.net/abhitalks/2vDue/2/

CSS ：

div.chart-picker #center {
    opacity: 0;
    transition: all 1s;
}
div.chart-picker:hover #center {
    opacity: 1;
}

悬停时平滑过渡

2 个答案: