Question

我有这个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

这个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;
                }

和这个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");
            });

出于某种原因，当我点击.user-review-toggle链接时，overflow: visible仅应用于user-review div几秒钟，然后返回隐藏状态（我应保持可见状态）。< / p>

有任何解决此问题的建议吗？

Answer 1

不确切地知道原因，但是如果你应用oncomplete中的溢出变化 - 动画的回调就可以了。至少，如果我理解你的问题。

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

jQuery切换函数只为一个元素分配一个css一秒钟（然后删除它）？

1 个答案: