jq implements cool mouse over image scrolling effect_jquery

• 1


• < span>2


• 3


• < a href="#">4


• 5


• 6


• 7


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

*{ 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;}

$(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);

});
});

});