上下滑动的图片效果

HTML

//no                       
                        

JS

//在页面加载事件中，为容器关联hover事件
$(document).ready(function(){
     $('.holder').hover(		 
        function () {                       //鼠标悬停时的事件处理代码
        $(this).removeClass('.notactive');	  //移除CSS类notactive
        $('.notactive').stop().animate({'width':'290px'},400); //动画使宽度为290
        $(this).find('img').stop().animate({'top':'-165px'},400); //使img元素的top到-165
        $(this).stop().animate({'width':'380px'},400);   //使宽度为380
        $(this).find('span').css({'background-color':'#000'}); //设置标题背景
        $(this).find('.text').fadeIn(300);              //淡入文本内容
      },
        function () {                       //鼠标移出时的事件处理代码
            $('.notactive').stop().animate({'width':'320px'},400); //动画设置宽度
            $(this).addClass('.notactive'); //添加noactive这个CSS类	
            $(this).find('.text').hide();   //使文本隐藏
            $(this).find('img').stop().animate({'top':'0px'},500); //调整img元素的top为0px
            $(this).stop().animate({'width':'320px'},400);//调整宽度为320px
            //设置标题的背景颜色
            $(this).find('span').css({'background-color':'#333', 'color':'#dedede'}); 

      });
});