我如何從底部顯示標題到jQuery中？

圖像字幕

<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的，我如何從底部顯示標題到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）。

但我需要從底部到頂部顯示該標題，當我mousehover。

我該怎麼做？

來源

2012-05-03 Ravichandran Jothi

不'slideUp'工作？它的工作原理是 – Nadh

。用於隱藏div的滑動。我需要反向顯示滑動功能（從底部到頂部） –

我得到了答案，

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

來源

2012-05-03 12:29:17

你可以使用jquery動畫來做到這一點。您可以嘗試將動畫邊距保留在您想要的位置。

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

這裏是鏈接。

來源

2012-05-03 10:50:50

，否則我們可以使用下面的一個也

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

來源

2012-05-04 05:01:49

我如何從底部顯示標題到jQuery中？

回答

相關問題