Monthly Archives: January 2011

jQuery animated swap div content on hover effect

This is a simple sample how to swap div content on mouse hover. Actually I first stumbled upon this web article: http://spoonfedproject.com/jquery/jquery-image-slide-on-hover-effect/. After making few changes I was able to swap actual content of a div instead of background.

Here is the javascript i used (don’t forget to include jQuery library):

1
2
3
4
5
6
7
$(function(){
    $("#vertical div.wrap").hover(function(){
        $(this).stop().animate({top:"-130px"},{queue:false,duration:200});
    }, function() {
        $(this).stop().animate({top:"0px"},{queue:false,duration:200});
    });
});

Here is simple CSS styling:

1
2
3
4
5
6
7
8
9
html,body,div,h2,img {margin:0;padding:0;border:none;}
html { font:1em Arial, Helvetica, sans-serif; color:#444; }
h1 {text-align:center;}
.clear { clear: both; }
#vertical { margin:50px auto; width:920px; }
#vertical div.element { margin-right:3px; float:left; width:296px; height:130px; border:1px solid #999; position:relative; overflow:hidden; }
.wrap { display: block; height: 260px; width: 296px; position: absolute; top: 0; }
.init { display: block; height: 130px; width:296px; background: #F96; }
.short { display: block; height: 130px; width:296px; background: #69C; }

And at the end the actual HTML needed:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="vertical" class="clear">
    <h1>jQuery image slide on hover effect (vertical)</h1>
   
    <div class="element">
        <div class="wrap">
            <div class="init">Hover over me</div>
            <div class="short">On hover content</div>
        </div>
    </div>
    <div class="element">
        <div class="wrap">
            <div class="init">Hover over me 1</div>
            <div class="short">On hover content 1</div>
        </div>
    </div>
    <div class="element">
        <div class="wrap">
            <div class="init">Hover over me 2</div>
            <div class="short">On hover content 2</div>
        </div>
    </div>
</div>