悬停时平滑过渡

Smooth transition on hover

本文关键字：平滑 悬停      更新时间：2023-09-26

我正在使用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?

文件如下:

http://jsfiddle.net/2vDue/

多谢

这里有一个渐变: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东西-我本来想隐藏/显示中心元素，直到我想起了fadeIn.

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

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

CSS

: 

div.chart-picker #center {
    opacity: 0;
    transition: all 1s;
}
div.chart-picker:hover #center {
    opacity: 1;
}
相关文章：