如何在jquery中显示从下到上的标题？

Question

                      图片标题                 

<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>

我在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>

它工作正常。标题从上到下显示（因为slideDown）。

但我需要在鼠标悬停时从下到上显示该标题。

我该怎么做？

Answer 1

你可以使用jquery animate来做到这一点。您可以尝试将边距设置为您想要的位置。

$('div.caption').animate();

这是链接。 http://api.jquery.com/animate/

Answer 2

我得到了答案，

<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>

Answer 3

或者我们也可以在下面使用

<script type="text/javascript">

jQuery(document).ready(function(){
jQuery("div.btheme img").mouseenter(function(){
jQuery(this).find("div.caption").show('slide', {direction:'down'}, 500);
});
jQuery("div.btheme img").mouseleave(function(){
jQuery(this).find("div.caption").hide('slide', {direction:'down'}, 100);
});

});
</script>