CODEWITHSUNDEEP
jqueryhtmlcss
dnfloat
dnfloat

Reputation: 23

multiple div's on hover animating the width with jquery

I have a question. I'm trying to create an effect where a div is expanding percentage wise on hover while the other divs in the same container are shrinking.

This is what I've got so far,

link

Not much, I'm aware.

The desired effect is quite simple. You hover, the width changes from 25% to 40% and back when hover out.

Does anybody know of anyway to make this possible?

Thanks in advance.

HTML

<div class="wrapper">
    <div class="een">een</div>
    <div class="twee">twee</div>
    <div class="drie">drie</div>
    <div class="vier">vier</div>
</div>

CSS:

.wrapper {
    width:100%;
    height:200px;
    overflow: hidden;
}
.wrapper div {
    width:25%;
    float:left;
    height:300px;
}
.wrapper .een {background:#ccc;}
.wrapper .twee {background:#ddd;}
.wrapper .drie {background:#333;}
.wrapper .vier {background:#666;}

JS:

$(function () {
    $(".wrapper > div").hover(

    function () {
        $(".wrapper > div").animate({
            width: '20%'
        });
        $(this).animate({
            width: '40%'
        });
    },

    function () {
        $(this).animate({
            width: '25%'
        });
        $(".wapper > div").animate({
            width: '25%'
        });
    });
});

Upvotes: 2

Views: 837

Answers (1)

Liftoff
Liftoff

Reputation: 25372

You are on the right track, but you are calling the effect to run on the siblings, rather than the element itself.

$(function () {
     $(".wrapper > div").hover(function () {
         $(this).stop().animate({
             width: '40%'
         }, 500);
     }).mouseout(function(){
         $(this).stop().animate({
             width: '25%'
         }, 500);
     });
});

By calling the animation onHover and onMouseOut, you can use $(this) to target the hovered element. Simply stop the animations and animate it's width to the proper size over an interval of 0.5s.

JSFiddle

Upvotes: 1

Related Questions