CODEWITHSUNDEEP
jquerycss
Paul
Paul

Reputation: 1004

JQuery hover animate

I have a Jquery Newbie question:

Here is my Fiddle: http://jsfiddle.net/NinjaSk8ter/T8TNP/

Here is what I need to accomplish: http://www.detailpaintinginc.com/index.php

Im having a problem with the hover:

You will notice that the lower color boxes all change opacity on hover.

The opacity for the specific child div (with class"box") should change to .5 The way it stands now all of the children's opacity is changing even if I only hover over one child.

Upvotes: 0

Views: 4434

Answers (3)

pomeh
pomeh

Reputation: 4922

Here is a working demo http://jsfiddle.net/pomeh/U4dyE/ You don't need Javascript to do this effect, look at the code :)

HTML code

<div id="container">
     <div class="wrap">
         <div class="box"></div>
         <div class="box"></div>
     </div>
</div>​

CSS code

#container {
    width: 300px;
    height: 300px;    
}

/* DRY :) */
.wrap, .box {
    width: 50px;
    height: 50px; 
    float: left;
    margin: 1px 1px 1px 1px;
}


.box {
    background-color: red;

    opacity: 1;
    filter:alpha(opacity=100);
    /* animation for "mouse out" */
    -webkit-transition: opacity 0.5s linear;  /* Saf3.2+, Chrome */
       -moz-transition: opacity 0.5s linear;  /* FF4+ */
        -ms-transition: opacity 0.5s linear;  /* IE10 */
         -o-transition: opacity 0.5s linear;  /* Opera 10.5+ */
            transition: opacity 0.5s linear;
}

.box:hover {
    opacity: 0.5;
    filter:alpha(opacity=50);
    /* animation for "mouse in" */
    -webkit-transition: opacity 0.5s linear;  /* Saf3.2+, Chrome */
       -moz-transition: opacity 0.5s linear;  /* FF4+ */
        -ms-transition: opacity 0.5s linear;  /* IE10 */
         -o-transition: opacity 0.5s linear;  /* Opera 10.5+ */
            transition: opacity 0.5s linear;
}

​

​JS code

// absolutely none ! :)

Upvotes: 4

Hubro
Hubro

Reputation: 59408

Your wrapper needs to be a bit wider for the boxes to have room on the same line. Also you should run the hover function on each box, not their parent, to get them to react individually:

$(function () {
    $('.wrap .box').hover(function() {
        $(this).stop().animate({'opacity': 0.5}, 50);
    }, function() {
        $(this).stop().animate({'opacity': 1}, 50);
    });
});​

http://jsfiddle.net/Codemonkey/T8TNP/7/

Upvotes: 0

j08691
j08691

Reputation: 208032

Why not just apply the effect directly to the divs instead of targeting the parent?

$('.box').hover(function() {
    $(this).stop().animate({
        "opacity": .5
    }, 50)
}, function() {
    $(this).stop().animate({
        "opacity": 1
    }, 50)
});

Also, your width on the .wrap element was too narrow which is why the boxes weren't appearing side by side.

jsFiddle example.

Upvotes: 1

Related Questions