Question

When the page is first loaded, and the image is hovered over for the first time, the sliding panel slides down from the top to the bottom. But ever time you hover over it after that, it slides up from the bottom – which is what I want. I don’t want it to slide down from the top the first time it’s hovered over. Is there any way to make it just slide up every time it’s hovered over? I’m sure there’s some simple solution but I’m not very familiar with 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/

Answer 1

Define a startup css to your element:

Here is jsFiddle.

.boxcaption{ 
    ...
    top:260px; 
}