jquery - 用于文本颜色和移动文本的 css 动画，带有 jquery 示例

Question

我正在尝试为我的文本颜色设置动画，并在悬停文本后向右移动约 15 像素。我认为这可以通过 css 实现，但不确定从哪里开始。

$('#home_solutions_list li').mouseenter(function() {
  link = $(this).find('.home_view_products a');
  link.stop(true, true).animate({
   'color': '#636a6d'
  }, 'fast');
  link.find('span').animate({
   'padding-left': '20px'
   }, 'fast');
});

所以颜色应该改变(不工作 jsfiddle)，然后 span 元素应该移动到文本的右侧。但是只有 span 元素应该移动，当前文本居中，链接文本也在移动。这可以简单地在 css 中完成吗？

http://jsfiddle.net/Q8KVC/2278/

Answer 1

设置这个:

.home_view_products a span {
  font-size: 16px;
  padding: 5px;
  position: relative;
  left: 0;
}

并将您的 JS 更改为:

$('#home_solutions_list li').mouseenter(function() {
  link = $(this).find('.home_view_products a');
  link.stop(true, true).animate({
    'color': '#636a6d'
  }, 'fast');
  link.find('span').animate({
    'left': '20px',
  }, 'fast');
});
$('#home_solutions_list li').mouseleave(function() {
  link = $(this).find('.home_view_products a');
  link.stop(true, true).animate({
    'color': '#1a92d0'
  }, 'fast');
  link.find('span').animate({
    'left': '5px'
  }, 'fast');
});

但是，我建议为悬停和悬停创建一个类，并使用 CSS 选择器而不是任何 JS 来设置这些类。只是一个小提示。