jq implements cool mouse over image scrolling effect_jquery

In just over ten lines of code, a cool image scrolling code is implemented. It is not difficult to achieve this effect. As long as the idea is right, everything is easy. Without further explanation, let’s go directly to the code to see the effect!

html structure:

Copy code The code is as follows:

• 1


• < span>2


• 3


• < a href="#">4


• 5


• 6


• 7


• < ;img src="images/13.jpg" alt="" />8

css code:

Copy code The code is as follows:

*{ margin:0; padding:0;}
.list{ width:640px; margin:100px auto; border:1px solid #ddd; overflow:hidden;}
. list li{ float:left; width:150px; height:80px; overflow:hidden; list-style:none; margin:5px; display:inline; position:relative;}
.list li img{ float:left; width:150px; height:80px; border:none;}
.list li a{ position:absolute; left:0; top:0; width:150px; height:0; background:#999; margin-top: 40px; display:inline; text-align:center; line-height:80px; overflow:hidden; color:#fff; text-decoration:none;}

jq code (note to introduce jq Library):

Copy code The code is as follows:

$(function () {
$('.list li').hover(function () {
$(this).children('a,img').stop();
$(this).children('img') .stop().animate({ 'marginTop': 40, 'height': 0 }, 200, function () {
$(this).siblings('a').stop().animate({ ' height': 80, 'marginTop': 0 }, 200);
});

}, function () {
$(this).children('a,img'). stop();
$(this).children('a').stop().animate({ 'height': 0, 'marginTop': 40 }, 200, function () {
$( this).siblings('img').stop().animate({ 'marginTop': 0, 'height': 80 }, 200);

});
});

});

Is it just a few simple jq codes? Dear, you might as well copy it and see the effect!