0

我在一个页面上显示 40 多个框：

<div id="primary">
    <div class="box" style="background:....">
        <a href="" style="color:....">box1</a>
    </div>
    <div class="box" style="background:....">
        <a href="" style="color:....">box2</a>
    </div>
    ....
</div>

如您所见，我设置了背景颜色和文本颜色。悬停时我想交换颜色：

      $(".box").each( function () {
          $(this).data('baseColor',$(this).css('background-color'));
          $(this).find('a').data('fontColor',$(this).css('color'));
          $(this).hover(function() {
            $(this).animate({ backgroundColor:
                       $(this).data('fontColor') }, 500);
          },function() {
            $(this).animate({ backgroundColor: 
                       $(this).data('baseColor') }, 1000);
          });
        });

背景颜色的动画有效，但我无法更改 a 元素的字体颜色。有任何想法吗？

4

2 回答 2

1

正如@Brandon 提到的，您需要jQuery UI（或其他东西；）来为非整数属性设置动画。

更大的问题是回调中上下文的变化each：在hover回调方法中， 的值this并不总是你想要的。此外，创建新的 jQuery 对象（使用$(...)）相对昂贵。尝试：

var cssBox = {
    backgroundColor: $('.box').css('background-color'),
    color: $('.box').css('color')
};

var cssLink = {
    backgroundColor: $('.box > a').css('background-color'),
    color: $('.box > a').css('color')
};

$(".box").each(function() {
    var $this = $(this),
        $this_a = $this.children('a');

    $this.data('baseColor', $this.css('background-color'));
    $this.data('fontColor', $this_a.css('color'));
    $this.hover(function() {
        $this.animate(cssLink, 500);
        $this_a.animate(cssBox, 500);
    }, function() {
        $this.animate(cssBox, 1000);
        $this_a.animate(cssLink, 1000);
    });
});

演示在这里。

于 2010-12-16T11:48:57.917 回答
0

jQuery 不能自己为颜色设置动画；你必须使用颜色插件。

至于交换颜色，您必须有一个临时变量来临时存储其中一种颜色。一些伪代码是这样的：

var bgCol = $(this).backgroundColor()
$(this).backgroundColor = $(this).textColor();
$(this).textColor = bgCol;
于 2010-12-16T11:45:36.063 回答