0

首次加载页面时，第一次将图像悬停在上方时，滑动面板从顶部向下滑动到底部。但是之后每次你将鼠标悬停在它上面时，它都会从底部向上滑动——这就是我想要的。我不希望它在第一次悬停时从顶部滑落。有没有办法让它每次悬停时都向上滑动？我确信有一些简单的解决方案，但我对 javascript 不是很熟悉。

<div class="boxgrid captionfull">  
<img src="http://s17.postimage.org/arxuilf9r/jareck.jpg"/>  
<div class="cover boxcaption">  
    <h3>Jarek Kubicki</h3>  
    <p>Artist<br/><a href="<a class="linkification-ext" title="Linkification: http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/" href="http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/">http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/</a>" target="_BLANK">More Work</a></p>  
</div>  


  .boxgrid{  
  width: 325px;  
  height: 260px;  
  margin:10px;  
  float:left;  
  background:#161613;  
  border: solid 2px #8399AF;  
  overflow: hidden;  
  position: relative;  
}  


  .boxgrid img{  
  position: absolute;  
  top: 0;  
  left: 0;  
  border: 0;  
}
  .boxcaption{  
  float: left;  
  position: absolute;  
  background: #000;  
  height: 100px;  
  width: 100%;  
  opacity: .8;  
  /* For IE 5-7 */  
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);  
  /* For IE 8 */  
  -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";  
}
  .captionfull .boxcaption {  
  top: 260;  
  left: 0;  
}

 $(document).ready(function(){  
    $('.cover').hide();
    $('.boxgrid.captionfull').hover(function(){  
        $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}).show();  
    }, function() {  
        $(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});  
    });  
});

http://jsfiddle.net/scottm29/NUpfz/1/

4

1 回答 1

1

为您的元素定义一个启动 css：

这是jsFiddle。

.boxcaption{ 
    ...
    top:260px; 
}
于 2013-01-30T22:20:24.963 回答