jQuery toggle functions only assign a css to an element for a second (then removes it)?
<p>I have this HTML:</p>

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

<p>this CSS:</p>

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

<p>and this JS:</p>

<pre><code>            $(".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");
            });
</code></pre>

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

<p>Any suggestions to fix this?</p>
