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

背景色のアニメーションは機能しますが、要素のフォントの色を変更できません。何か案は？

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はそれ自体で色をアニメーション化することはできません。カラープラグインを使用する必要があります。

色を入れ替える場合は、一時的に色の1つを保存するための暫定変数が必要になります。いくつかの擬似コードは次のようになります。

var bgCol = $（this）.backgroundColor（）
$（this）.backgroundColor = $（this）.textColor（）;
$（this）.textColor = bgCol;
于 2010-12-16T11:45:36.063 に答える