CODEWITHSUNDEEP
jquerycss
qr11
qr11

Reputation: 441

JQuery increase div size on hover

When user hovers div this div increases size. But how to decrease size when user removes cursor from this div.

var hoveredDiv;
        $('.promoContent').hover(function () {
            hoveredDiv = $(this).attr('id');
            $('#' + hoveredDiv).animate({height: '100%'});
        });

Upvotes: 0

Views: 1589

Answers (3)

Hossein Badrnezhad
Hossein Badrnezhad

Reputation: 502

var hoveredDiv;
    $('.promoContent').hover(function () {
        hoveredDiv = $(this).attr('id');
        $('#' + hoveredDiv).animate({"height": "100%"});
    });

$('#' + hoveredDiv).animate({"height": "100%"});

Just add double qute ( " " )

"height": "100%"

Upvotes: 0

DinoMyte
DinoMyte

Reputation: 8868

You may also use mouseover and mouseout events.

http://jsfiddle.net/xno5hb34/1/

<button class="promoContent" id="hoveredDiv" style="width:30%; height: 60%; background-color: red">MouseOverToIncreaseSize</button>

var hoveredDiv;
    $('.promoContent').mouseover(function () {
        hoveredDiv = $(this).attr('id');
        $('#' + hoveredDiv).animate({ height: (parseInt($('#' + hoveredDiv).css("height").trim('px')) * 2) + "px" });
    });

    $('.promoContent').mouseout(function () {
        hoveredDiv = $(this).attr('id');
        $('#' + hoveredDiv).animate({ height: (parseInt($('#' + hoveredDiv).css("height").trim('px')) / 2) + "px" });
    });

Upvotes: 1

LTasty
LTasty

Reputation: 2008

You can use

The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.

$('.promoContent').hover(function () {
    $(this).animate({height: '100%'});
},function(){
      $(this).animate({height: '50%'});
});

Upvotes: 1

Related Questions