使用 jQuery 更改背景颜色。重置为默认答案

【问题标题】：Changing background colour with jQuery. Reset to default使用 jQuery 更改背景颜色。重置为默认
【发布时间】：2013-01-06 22:06:15
【问题描述】：

我有一个<ul>，我在其中使用 jQuery UI Sortable 来允许对包含的<li>s 进行排序。

<li>s 使用交替的背景颜色设置样式：

.list-striped li:nth-child(odd) {
  background-color: #f9f9f9;
}

当<li> 像这样被拖动时，我正在使用 Sortable 开始和停止功能来创建一个漂亮的过渡：

$( ".sortable" ).sortable({
        start: function(event, ui){
            $(ui.item).animate({
                'background-color': '#333333'
            }, 'fast');
        },
        stop: function(event, ui){
            $(ui.item).animate({
                'background-color': ''
            }, 'fast');
        }
    });

我现在的问题是，当我们清除背景颜色时，它不会恢复到以前的背景颜色（或从 CSS 继承它应该的背景颜色）。我正在努力实现的目标可能吗？

【问题讨论】：

您正在做的是将停止功能上的background-color 设置为空。这不会恢复颜色，它会将其设置为空。您可以在将初始颜色设置为 #333333 之前使用变量来存储初始颜色，然后您可以将其设置为动画。
.css("backgroundColor","") 应该删除样式属性中的背景颜色属性；用你的萤火虫看看你的李发生了什么
您是否尝试将其设置为“继承”而不是空字符串？
如果您不关心向后兼容性，请使用 addClass 和 removeClass 添加具有背景颜色的高亮类，并为动画使用 CSS3 过渡。
您首先使用...:nth-child(odd)... 来实现斑马条纹，因此您需要执行类似的操作以在停止时恢复斑马条纹。当您想要制作动画时，您需要分别为赔率和事件制作动画。

标签： jquery css jquery-ui jquery-ui-sortable

【解决方案1】：

不要使用 jQuery 为颜色设置动画，而是使用 CSS transitions：

$( ".sortable" ).sortable();

CSS：

.list-striped li{
  width:200px;
  border:1px solid #ccc;
  padding:10px;
  transition: background 0.2s linear;
  -o-transition: background 0.2s linear;
  -moz-transition: background 0.2s linear;
  -webkit-transition: background 0.2s linear;
   cursor:pointer;
}
.list-striped li:nth-child(odd) {
  background-color: #faa;
}
.list-striped li.ui-sortable-helper{
  background-color:#a55 !important;
}

JSFiddle

【讨论】：

如果你能保证你不需要支持不支持CSS3的浏览器
嗯，所有现代浏览器都支持 CSS 过渡（IE 除外）。你永远不应该仅仅因为 IE 不支持它们而避免使用技术......如果你真的关心 IE，你可以简单地包含许多 javascript 库之一，这会使你的网站更加“IE 友好”......
你不应该在这一点上如此教条。许多组织的政策是不使用并非所有主要浏览器都支持的任何技术。如果您想采用不同的政策，这取决于您。
嗯，它在 IE >= 10 中受支持。正如我所说，如果您希望您的 web 应用真正成为跨浏览器，只需包含一个文件即可。
完美，谢谢。出于某种原因，我认为 CSS 转换在添加/删除类时不适用。我以为它只是悬停/活动

【解决方案2】：

你应该首先将原始值存储在另一个变量中，比如说originalcolor 所以

var orginalcolor;
$( ".sortable" ).sortable({
    start: function(event, ui){
        orginalcolor = $(ui.item).css('background-color'); //store the color
        $(ui.item).animate({
            'background-color': '#333333'
        }, 'fast');
    },
    stop: function(event, ui){
        $(ui.item).animate({
            'background-color': originalcolor
        }, 'fast');
    }
});

【讨论】：

这很好......我已经在jsfiddle.net/akhurshid/QUxzA 尝试过你的代码，它工作正常。
但原色不止一种。 lis 是斑马条纹。
这个原始颜色也适用于斑马条纹，因为它把当前拖动的对象背景颜色作为原始背景颜色
@A.K，你或我都误解了这个问题。我不知道谁是对的。
是的，这背后的想法是，每次他移动一个项目时，它都会在移动它之前存储它的值。

【解决方案3】：

非常简单，但不会动画

$(ui.item).removeAttr("style");

【讨论】：