0

我有一个简单的 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>

提前致谢！

4

1 回答 1

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;

小提琴示例

于 2013-11-06T01:48:43.930 回答