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 に答える