Home/ Questions/Q 7548697
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T09:45:53+00:00

I wish to avoid using css transitions. I have three divs of the same

  • 0

I wish to avoid using css transitions.

I have three divs of the same class. I’m attempting to toggle the background color of one div when clicked. When the div is clicked again, or one of the other are clicked, I wish it to return to default.

I have included the jQuery color plugin and succeded in changing the color on click. I belive that my conditions are wrong and thats why i cant change the color back when clicking the other div.

This is what i’ve done:

<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>

I have had some trouble understanding the backgroundColor consept and hope for help. 🙂

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    <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>

    Try this. CSS3 could help if you want to use css as well.

    There are 3 divs and when you click one of them, it will become blue. When you click other divs, blue is gonna red and clicked one is gonna blue. If you gonna click blue, It will become blue back.

    <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>
    • 0