自定義jquery動畫效果

Question

我正在嘗試爲引導中的懸停縮略圖創建自定義效果。關於如何更有效地編寫此代碼的任何想法？似乎一旦INA而有色格將了slideDown但內

JS

$("[rel='tooltip']").tooltip();  

$('.thumbnail').hover(
    function(){ 
      $(this).find('.caption').slideDown(250).animate({"background-color":"rgba(242, 200, 2, 0.75)"},900); 
      $(this).find('.captionhead').show().animate({"color":"black","font-size":"24px"},400,"easeOutBounce"); 
       $(this).find(".captionph").show().animate({"color":"black","font-size":"30px"},400,"easeOutBounce"); 
    }, 
    function(){ 
      $(this).find('.caption').slideUp(250).animate({"background-color":"rgba(66, 139, 202, 0.75)"},600, function(){ 
         $(this).find('.captionhead').animate({"color":"white","font-size":"18px" },100).hide(); 
         $(this).find(".captionph").animate({"color":"black","font-size":"10px"},100,"easeOutBounce").hide(); 
      }); //.fadeOut(205) 

     }  
); 

HTML

<div class="col-sm-6 col-md-3 bpad"> 
     <div class="thumbnail"> 
     <div class="caption"> 
      <h4 class="captionhead">Sliced Bread</h4> 
      <p class="captionph">description</p> 
     </div> 
     <div> 
      <img class="img-circle img-responsive" src="photo/1.jpg" alt="logo"> 
     </div>  
     </div> 
    </div> 

Answer 1

看起來在我身邊好不會顯示標題和pH值的元素，至少按你的描述去：

個HTML

<div class="col-sm-6 col-md-3 bpad"> 
<div class="thumbnail"> 
    <div class="caption"> 
     <h4 class="captionhead">Sliced Bread</h4> 

     <p class="captionph">description</p> 
    </div> 
    <div> 
     <img class="img-circle img-responsive" src="photo/1.jpg" alt="logo" /> 
    </div> 
</div> 
</div> 

JS

$("[rel='tooltip']").tooltip(); 

$('.thumbnail').hover(

function() { 
$(this).find('.caption').slideDown(250).animate({ 
    "background-color": "rgba(242, 200, 2, 0.75)" 
}, 900); 
$(this).find('.captionhead').show().animate({ 
    "color": "black", 
     "font-size": "24px" 
}, 400, "easeOutBounce"); 
$(this).find(".captionph").show().animate({ 
    "color": "black", 
     "font-size": "30px" 
}, 400, "easeOutBounce"); 
}, 

function() { 
$(this).find('.caption').slideUp(250).animate({ 
    "background-color": "rgba(66, 139, 202, 0.75)" 
}, 600, function() { 
    $(this).find('.captionhead').animate({ 
     "color": "white", 
      "font-size": "18px" 
    }, 100).hide(); 
    $(this).find(".captionph").animate({ 
     "color": "black", 
      "font-size": "10px" 
    }, 100, "easeOutBounce").hide(); 
}); //.fadeOut(205) 

}); 

這裏是一個小提琴：http://jsfiddle.net/2d9G7/1/