Поменяйте местами шрифт и цвет фона с помощью jQuery - PullRequest
Новая
       23

Поменяйте местами шрифт и цвет фона с помощью jQuery

0 голосов
/ 16 декабря 2010

Я отображаю 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. Есть идеи?

Ответы [ 2 ]

1 голос
/ 16 декабря 2010

Как упомянул @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);
    });
});

Демо здесь .

0 голосов
/ 16 декабря 2010

jQuery не может анимировать цвета самостоятельно;вам придется использовать плагин color .

Что касается обмена цветами, вам понадобится временная переменная, чтобы временно сохранить один из цветов.Какой-то псевдокод будет такой: 

var bgCol = $(this).backgroundColor()
$(this).backgroundColor = $(this).textColor();
$(this).textColor = bgCol;
...