Question

我正在尝试创建一个通用的“闪光颜色确认”功能，它会将对象的背景闪烁为绿色，然后淡出到现有颜色的任何颜色。

所以我可能有两个元素，我在click（）上调用它：

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 a：悬停状态背景颜色：

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

然后我的所有衰落都从绿色变为紫色。这是有道理的，因为在点击LI时，背景确实是紫色的。

有没有一种聪明的方法来获取'非悬停'CSS类的背景颜色？

一种改写它的方法是，我想获取分配给LI当前类的背景颜色，而不是伪类。

或者是不是通过CSS实现悬停的解决方案，而是通过jQuery实现？

Answer 1

您应该安装颜色插件，这样您就可以直接为颜色设置动画。动画不透明度是有问题的，因为文本和背景都是动画的。

请参阅：http://plugins.jquery.com/project/color

Answer 2

您可以在绑定confirmFlash功能时将初始背景颜色存储在变量中，如下所示......

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

Answer 3

这就是我想出的。我从CSS中省略了：hover类并创建了一个.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))})
};

然后，在click事件触发的函数中，我删除了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文件继承，而不是通过动画创建的新内联样式。

这是有效的。呼！

jQuery抓取元素的颜色PRE：悬停

3 个答案: