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，背景白色。基本上，只有一个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具有bg且内部元素不会向其添加BG。那么你的代码就更简单了。

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

Jquery DIV单击颜色更改

1 个答案: