Question

I have this HTML:

   <div class="user-contribution">
     <p class="user-review"> Review</p> 2. Animate this
     <a class="user-review-toggle" href="#">Read more...</a> // 1. Clicking this

this CSS:

            .user-contribution {
                overflow: hidden;
                img {
                    float: left;
                    margin: 0 15px 0 0;
                    overflow: hidden;
                }
                .user-review {
                    font-size: 12px;
                    line-height: 14px;
                    overflow: hidden;
                }

and this JS:

            $(".user-review-toggle").toggle(function(){
                $(this).css("backgroundPosition", "0 -12px");
                $(this).prev('.user-review').animate({height:150},200);
                $(this).prev('.user-review').css("overflow", "visible");
            },function(){
                $(this).css("backgroundPosition", "0 0");
                $(this).prev('.user-review').animate({height:98},200);
                $(this).prev('.user-review').css("overflow", "hidden");
            });

For some reason, when I click the .user-review-toggle link the overflow: visible is only applied to the user-review div for a seconds then it returns to hidden (I should stay visible).

Any suggestions to fix this?

Answer 1

Don’t exactly see why, but if you apply the overflow changes in the oncomplete-callback of the animation it works. At least, if I understood your problem.

$(".user-review-toggle").toggle(function(){
  $(this).css("backgroundPosition", "0 -12px");
  $(this).prev('.user-review').animate({height: 150}, 200, function () {
    $(this).css("overflow", "visible");
  });
}, function(){
  $(this).css("backgroundPosition", "0 0");
  $(this).prev('.user-review').animate({height: 98}, 200, function () {
    $(this).css("overflow", "hidden");
  });
});

http://jsfiddle.net/rWTXe/