Поменять местами шрифт и цвет фона с помощью 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>

Как видите, я установил цвет фона и цвет текста. При наведении я хочу поменять местами цвета:

      $(".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. Любые идеи?


javascript jquery jquery-selectors jquery-hover
person Upvote    schedule 16.12.2010    source источник
comment
Если вы не используете пользовательский интерфейс jquery, вызов анимации ничего не сделает.   -  person Brandon    schedule 16.12.2010
comment
анимация работает, у меня есть плагин цвета jQuery в комплекте   -  person Upvote    schedule 16.12.2010

Ответы (2)


arrow_upward
1
arrow_downward

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

Демо-версия здесь.

person sje397    schedule 16.12.2010
comment
спасибо, цвет фона не меняется на цвет шрифта, но цвет шрифта остается прежним - person Upvote; 16.12.2010
comment
@ArtWorkAD: там нечем изменить цвет шрифта. Попробую что-нибудь добавить. - person sje397; 16.12.2010
comment
кажется, что скрипт не находит цвет шрифта - person Upvote; 16.12.2010
comment
Вы внесли изменения в строку 4? Раньше вы устанавливали данные fontColor в элементе «a». - person sje397; 16.12.2010
comment
Попробуйте изменить animate на css. - person sje397; 16.12.2010
comment
Я немного отладил, и кажется, что он сохраняет правильный цвет, но не может его применить; изменение анимации на css не работает - person Upvote; 16.12.2010
comment
анимация применяется к блоку, но не к элементу a. Мне нужно оживить цвет элемента a - person Upvote; 16.12.2010
comment
@ArtWorkAD - последнее: было бы намного лучше / чище / поддерживаемо / и т. Д., Если бы вы могли просто сделать это в css (или, по крайней мере, просто добавить / удалить стилизованный класс в div и установить цвета в css :) - person sje397; 16.12.2010
comment
Ах да, достаточно честно. Интересно, есть ли способ оживить добавление класса. - person sje397; 16.12.2010

arrow_upward
0
arrow_downward

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

Что касается замены цветов, вам понадобится временная переменная для временного хранения одного из цветов. Некоторый псевдокод будет таким:

var bgCol = $(this).backgroundColor()
$(this).backgroundColor = $(this).textColor();
$(this).textColor = bgCol;
person Bojangles    schedule 16.12.2010