鼠标经过隐藏图片显示文字

鼠标经过隐藏图片显示文字

演示
 JavaScript Code<script>  
  
$(document).ready(function() {  
    //if mouse over and mouse out  
    $('.eff').hover(  
    function () {  
  
        value = $(this).find('img').outerHeight() * -1;  
  
        //for left/right if you have different width and height,   
        //commented out because we are using up/down in this example  
        //value = $(this).find('img').outerWidth() * -1);   
          
        //animate the image  
        // you can change the sliding direction by changing bottom to left, right or top  
        // if you changed this, you will have to change the position of the hover out as well  
        $(this).find('img').stop().animate({bottom: value} ,{duration:500, easing: 'easeOutBounce'});     
          
    },  
    function () {  
          
        //reset the image  
        // the position property (bottom), it must be same with the on in the mouseover  
        $(this).find('img').stop().animate({bottom:0} ,{duration:500, easing: 'easeOutBounce'});      
      
    });  
      
    //if user clicked on the thumbnail  
    $('.eff').click(function () {     
        //grab and execute the first link in the thumbnail  
        window.location = $(this).find('a:first').attr('href');  
    });  
      
});  
  
</script>  
 XML/HTML Code<div class="eff">  
    <img src="1.gif" alt="Test 1" title="" width="126" height="126" />  
    <div class="caption"><a href="http://www.freejs.net" class="header">www.freejs.net</a></div>  
</div>  
  
<div class="eff">  
    <img src="2.gif" alt="Test 1" title="" width="126" height="126" />  
    <div class="caption"><a href="http://www.freejs.net" class="header">Umbrella</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div>  
</div>  
  
<div class="eff">  
    <img src="3.gif" alt="Test 1" title="" width="126" height="126" />  
    <div class="caption"><a href="http://www.freejs.net" class="header">Maximum</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div>  
</div>  
  
<div class="clear"></div>  
 
原文地址:http://www.freejs.net/article_jquerywenzi_107.html