自定义jquery动画效果答案

【问题标题】：Custom Jquery animation effect自定义jquery动画效果
【发布时间】：2014-03-19 05:42:45
【问题描述】：

我正在尝试为引导程序中的悬停缩略图创建自定义效果。关于如何更有效地编写此代码的任何想法？似乎有时彩色 div 会向下滑动，但不会显示其中的标题和 ph 元素

$("[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>

【问题讨论】：

首先，完全摆脱(this).find(... 部分，你不需要它们，其次，关于你想要实现的目标以及正在发生的事情的更多信息会很多赞赏;)
无需删除 $(this).find..（它的存在是为了 context）
注意！更正了我的回答，谢谢！

标签： jquery jquery-ui twitter-bootstrap animation

【解决方案1】：

在我这边看起来不错，至少按照你的描述：

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>

$("[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/

【讨论】：

请注意：$(this).find 不是“不必要的”——它提供了选择器范围（或上下文）。而不是查询整个 DOM（这是你的小提琴所做的），它将有一个父级。它不仅性能更好，而且避免了与具有相同类名的多个元素发生冲突。
感谢 webeno，但是当我尝试您的方式时，p & h4 元素会偶尔消失。使用我的代码，h1 & p 元素会偶尔恢复到鼠标悬停状态
一个似乎没有比另一个表现更好......这仅仅是由于浏览器的限制和队列中动画的建立（或者我读过的类似的东西，我只是鹦鹉学舌）？
p 和 h4 元素对我来说总是消失，但这是因为你 slideUp .caption 将它们包裹起来。您应该将它们分开移动，也许为您想要隐藏的位创建一个占位符，然后将其余部分（您仍想显示）放在其下方。