Question

我希望避免使用css过渡。

我有三个同一个班级的div。我点击时试图切换一个div的背景颜色。再次单击div或单击其中一个时，我希望它返回默认值。

我已经包含了jQuery颜色插件，并成功地在点击时更改了颜色。我相信我的条件是错误的，这就是为什么我不能在点击另一个div时改变颜色。

这就是我所做的：

<script type="text/javascript">
jQuery(document).ready(function() {
    $('.link').click(function() {
        var $me = $(this);
        if ($me.css("background-color") == "#993") {
            $me.animate({backgroundColor:"#246"}, 500);
        } else {
            $(".link").each(function() {
                if ($(this) != $me) {
                    if ($(this).css("background-color") == "#246") {
                        $(this).animate({backgroundColor:"#993"}, 500);
                    }
                } 
            });
            $me.animate({backgroundColor:"#246"}, 500);
        }
    });
});
</script>
<style type="text/css">
.link {
    width:100px;
    padding:10px;
    background-color:#993;
    float:left;
    display:inline;
    text-align:center;
}
</style>
</head>
<body>
    <div class="link">link</div>
    <div class="link">link2</div>
    <div class="link">link3</div>

我在理解backgroundColor概念时遇到了一些麻烦并希望得到帮助。：）

谢谢！

Answer 1

默认情况下，使用jQuery无法为

background-color设置动画。您需要使用jQuery Color等插件，该插件是jQuery UI。

的一部分

然后你可以用toggle()：

来做

<强> HTML

<div></div>
<button>Color</button>

<强> CSS

div { 
    height: 50px; 
    width: 50px; 
    background: #ff0000; 
}

<强> JQ

$('button').toggle(function(){
    $('div').animate({'background-color': '#00ff00'});
}, function(){
    $('div').animate({'background-color': '#ff0000'});
});

示例 http://jsfiddle.net/kh6pj/1/

Answer 2

<script type="text/javascript">
function animateBackgroundColor() {
    $('.foo').toggleClass('fooAct');
}
$(document).ready(function(){
    $('.foo').click(function (){
        animateBackgroundColor();
    });
});
</script>
<style>
div {
height:200px;
}
.foo {
transition: background-color 2s;
-moz-transition: background-color 2s; /* Firefox 4 */
-webkit-transition: background-color 2s; /* Safari and Chrome */
-o-transition: background-color 2s; /* Opera */
background-color: red;
}
.fooAct {
background-color:blue;
}
</style>
<div class="foo"></div>

试试这个。如果你想使用CSS，CSS3可能会有所帮助。

有3个div，当你点击其中一个时，它会变成蓝色。当你点击其他div时，蓝色会变红并点击一个就会变成蓝色。如果你要点击蓝色，它会变成蓝色。

<script type="text/javascript">
function animateBackgroundColor(obj) {
    $(obj).toggleClass('fooAct');
    $('.fooAct').not(obj).removeClass('fooAct');

}
$(document).ready(function(){
    $('.foo').click(function (){
        animateBackgroundColor(this);
    });
});
</script>
<style>
div {
height:100px;
margin-bottom:10px;
}
.foo {
transition: background-color 1s;
-moz-transition: background-color 1s; /* Firefox 4 */
-webkit-transition: background-color 1s; /* Safari and Chrome */
-o-transition: background-color 1s; /* Opera */
background-color: red;
}
.fooAct {
background-color:blue;
}
</style>
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>

jQuery - 使用动画仍然需要帮助19.02.2012在div上切换背景颜色

2 个答案: