Javascript 使用jQuery交换字体和背景色

我在一页上显示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>

---

背景色的动画可以工作，但我不能更改元素的字体颜色。有什么想法吗？

jQuery无法自行设置颜色动画；你得用这个

至于交换周围的颜色，您必须有一个临时变量来临时存储其中一种颜色。一些伪代码如下所示：

var bgCol = $(this).backgroundColor() $(this).backgroundColor = $(this).textColor(); $(this).textColor = bgCol; var bgCol=$（this.backgroundColor（） $（this.backgroundColor=$（this.textColor（）； $（this）.textColor=bgCol；

---

正如@Brandon所提到的，您需要（或其他；）为非整数属性设置动画

更大的问题是

每个

回调中上下文的变化：在

悬停

回调方法中，

这个

的值并不总是您想要的。另外，创建新的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);
    });
});

---

演示。

除非您使用jquery UI，否则taht animate call不会做任何事情。动画工作正常，我有jquery颜色插件。谢谢，没有背景颜色更改为字体颜色，但字体颜色保持不变same@ArtWorkAD：没有可更改字体颜色的内容。我将尝试添加一些内容。脚本似乎找不到字体颜色。您在第4行中做了更改吗？以前您在“a”元素上设置了“fontColor”数据。请尝试将

animate

更改为

css

。

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