CODEWITHSUNDEEP
jqueryjquery-uitwitter-bootstrapanimation
Vynce82
Vynce82

Reputation: 119

Custom Jquery animation effect

I am trying to create a custom effect for on-hover thumbnails in bootstrap. Any ideas on how i could write this code more efficiently? it seems that once ina while the colored div will slidedown but not show the heading and ph elements within

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>

Upvotes: 0

Views: 231

Answers (1)

benomatis
benomatis

Reputation: 5633

looks good on my side, at least going by your description:

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)

});

here is a fiddle: http://jsfiddle.net/2d9G7/1/

Upvotes: 1

Related Questions