Jquery DIV点击颜色变化

Question

我有一个简单的 JQuery 脚本：

$('.pane-hover').mouseenter(function() {
    $(this).children().animate({backgroundColor: "#fff"}, 200 );
});
$('.pane-hover ').mouseleave(function() {
    $(this).children().animate({backgroundColor: "#e4e4e4"}, 200 );
});

它的作用（使用 Jquery Color）是当您将鼠标移入 div 时，它会将背景变为白色，而离开 div 会将其恢复为正常颜色。有多个 .pane-hover 类。

我想要做的是立即激活点击动画 - 这样当您点击 div 时，它会将背景变为白色，但是当您点击另一个 div（同一类）时，它会将另一个恢复为原来的正常颜色，然后使您单击的新 div 变为背景白色。所以本质上，只有一个 div 有背景白色。

你知道怎么做吗？

现有 HTML 示例：

<div class="pane pane-hover pane-history" id="pane4">
<div class="scroll-pane">
    <div class="title title-empty"></div>
    <div class="scroll-pane-inner">
        <h2>TITLE</h2>
        <p>Text.</p>
    </div>
    <div class="footer-divider"></div>
</div></div>

提前致谢！

Answer 1

$('.pane-hover ').click(function(){
  $('.pane-hover').removeClass('animatedColor');
  $(this).addClass('animatedColor');
});

还要注意让.pane 有一个背景，并且内部元素不要给它们添加背景。那么你的代码就简单多了。

CSS

.animatedColor{
   background:#fff!important;
   transition:1s;
   -webkit-transition:1s;
   -moz-transition:1s;
   -o-transition:1s;
 }

将此添加到默认颜色以转换回默认颜色类.pane

     transition:1s;
    -webkit-transition:1s;
    -moz-transition:1s;
    -o-transition:1s;

FIDDLE EXAMPLE