jQuery захватывает цвет элемента PRE: hover - PullRequest
Новая
       9

jQuery захватывает цвет элемента PRE: hover

0 голосов
/ 30 октября 2009

Я пытаюсь создать общую функцию «подтверждения цвета», в которой фон объекта будет мигать зеленым, а затем исчезнет до того цвета, в котором он существовал.

Так что у меня может быть два элемента, которые я вызываю при щелчке (): 

li background-color: red
li background-color: black

Если я нажму первый, он станет зеленым и красным. Если я щелкну первый, он станет зеленым и черным.

Логика jQuery:

событие клика: 

listItem.each(function(){confirmFlash($(this),$(this).css("backgroundColor"))});

функция: 

function confirmFlash(objectToFlash,backgroundColor){
    objectToFlash.css("backgroundColor","#84da9a").animate({opacity: 1}, 1000).animate({backgroundColor: backgroundColor}, 500);
}

Это прекрасно работает. Улов:

Если я также дам приведенный выше цвет фона: состояние при наведении: 

li background-color: red
li background-color: black
li:hover background-color: purple

Тогда все мои увядания переходят от зеленого к фиолетовому. Это имеет смысл, так как во время щелчка LI фон действительно фиолетовый.

Есть ли умный способ получить фоновый цвет "не зависшего" класса CSS?

Способ перефразировать это то, что я хотел бы получить цвет фона, назначенный текущему классу LI, а не псевдоклассу.

Или это решение для реализации наведения не с помощью CSS, а с помощью jQuery?

Ответы [ 3 ]

0 голосов
/ 30 октября 2009

Вы можете сохранить исходный цвет фона в переменной в то время, когда вы связываете функцию verifyFlash, что-то вроде этого ... 

jQuery.fn.confirmFlash = function(config){
    this.each(function() {
        var elem = jQuery(this);

        // Store the starting background color
        var startBg = elem.css("backgroundColor");

        // When the element is clicked
        elem.click(function() {
            // Set the start background color
            elem.css("backgroundColor", startBg);
            // Animate to the "flash" color
            elem.animate({backgroundColor: config.backgroundColor}, {duration: 1000, complete: function() {
                // Animate back to the start background color
                elem.animate({backgroundColor: startBg}, {duration: 1000});
            }});
        });
    });
};

И тогда вы можете использовать это так ... 

$("li").confirmFlash({backgroundColor: "#84da9a"});
0 голосов
/ 30 октября 2009

Вот что я придумал. Я исключил класс: hover из моего CSS и создал .hover, который затем добавляю или удаляю с помощью jquery: 

function createToggleList(){
    // create mouseovers/outs 
    $("ul.toggleList li").mouseover(function(){
        $(this).addClass("hover");
    });
    $("ul.toggleList li").mouseout(function(){
        $(this).removeClass("hover");
    });     
    // attach the click event
    $("ul.toggleList li").click(function(){toggleToggleListItem($(this))})
};

Затем в функции, которая вызывается при событии щелчка, я удаляю класс HOVER, чтобы затем я мог получить фон, которым был до наведения: 

function toggleToggleListItem(listItem) {
    listItem.removeClass("hover");
    confirmFlash(listItem,listItem.css("backgroundColor"));
};

А вот функция, которая создает вспышку: 

function confirmFlash(objectToFlash,backgroundColor){
    objectToFlash.css("backgroundColor","#84da9a").animate({opacity: 1}, 1000).animate({backgroundColor: backgroundColor}, 500, function(){
        objectToFlash.removeAttr("style");
    });
}

Обратите внимание, что я должен удалить атрибут STYLE после анимации, так как я хочу, чтобы элемент снова наследовал из файла CSS, а не новый встроенный стиль, созданный с помощью анимации.

и это работает. Уф!

0 голосов
/ 30 октября 2009

Вы должны действительно установить плагин цвета, который позволит вам анимировать цвета напрямую. Анимация непрозрачности проблематична, потому что текст и фон анимированы.

см .: http://plugins.jquery.com/project/color

...