jquery - 如何在 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>