Question

image caption

<div class="btheme">    
   <a href="/a3"><img src="/a3.jpg" /></a>
   <div class="caption">
       <div>image caption3</div>
   </div>   
</div>


<div class="btheme">    
   <a href="/a2"><img src="/a2.jpg" /></a>
   <div class="caption">
      <div>image caption2</div>
   </div>   
</div>

i used below code for show / hide caption when mouseover in jquery,

<script type="text/javascript">

    jQuery(document).ready(function(){

         jQuery("div.btheme img").mouseover(function(){
              jQuery(this).parent().find("div.caption").slideDown("slow");             
         });

         jQuery("div.btheme img").mouseout(function(){
             jQuery(this).parent().find("div.caption").slideUp("fast");              
         });                
   });

  </script>

it works fine. the caption is displayed from top to bottom(because of slideDown).

But i need to display that caption from bottom to top when i mousehover.

How can i do this?

Answer 1

i got answer,

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("div.btheme img").mouseenter(function(){
jQuery(this).find("div.caption").animate({
    width: "180px", 
    top: "-84px",   
    display: "block",
    opacity: "1"
  }, 1000 );
});
jQuery("div.btheme img").mouseleave(function(){
jQuery(this).find("div.caption").stop().animate({
    width: "180px", 
    display: "none",
    top: "-60px",
    opacity: "0"
  }, 500 );
  });

});
</script>