CODEWITHSUNDEEP
javascriptjquerycssanimationjquery-animate
Ahmed Moness
Ahmed Moness

Reputation: 237

Hover effect on multiple boxes

I have multiple boxes, I want to apply hover effect to each, that when I hover a single one, all other boxes should appear more transparent, giving a more focusing effect. I need to accomplish it with some sort of slow transition effects.

I've tried to make it as following but it seems not working well

http://jsfiddle.net/ahmed2222/rSNS5/2/

<div class="container">
    <div class="thumb"> </div>
    <div class="thumb"> </div>
    <div class="thumb"> </div>
    <div class="thumb"> </div>
    <div class="thumb"> </div>  
    <div class="thumb"> </div>
    <div class="thumb"> </div>
    <div class="thumb"> </div>
    <div class="thumb"> </div>
 <div>

.container {
    width: 400px;
    overflow: auto;
}

.thumb {
    width:100px;
    height:100px;
    background: #000;  
    display: inline-table;
    margin: 10px;
}

$(function() {
    $('.thumb').hover(function () {
      $(this).css({"opacity":"1"});
      $('.thumb').not(this).animate({"opacity":"0.3"}, 1000);
    },
    function () {
      $('.thumb').css({"opacity":"1"});
    });
});

Any idea, why my code is not working?

Upvotes: 1

Views: 285

Answers (2)

Smern
Smern

Reputation: 19066

The only real problem that I noticed with your original solution is that sometimes the animations that were running were causing problems when you move from one item to another quickly. Was this the problem you wanted to address? If so, you can put stop()s to stop the animation.

Try this: http://jsfiddle.net/rSNS5/4/

$(function() {
    $('.thumb').hover(function () {
      $('.thumb').stop();
      $(this).css({"opacity":"1"});
      $('.thumb').not(this).animate({"opacity":"0.3"}, 1000);
    },
    function () {
      $('.thumb').stop().css({"opacity":"1"});
    });
});

Upvotes: 1

Pevara
Pevara

Reputation: 14310

No need for javascript to achieve this, pure css will do:

.container:hover .thumb {
    opacity: .5;
}

.container:hover .thumb:hover {
    opacity: 1;
}

and a fiddle for demonstration: http://jsfiddle.net/pPWgq/

edit:
and with the transitions: http://jsfiddle.net/pPWgq/1/

just added this:

.thumb {
   ...
   transition: opacity 1s;
}

Upvotes: 1

Related Questions