0

I have a div box, with a lot of p tags in side, and it is getting very long.

So I added on the top of the box, a show more text.

The box have a height: 100px; overflow: hidden;, but then when someone click on show more, I would like it to slideDown the box, to get the normal height, which it would have had if height: 100px; was not set.

Any idea how to do this?

I tried the following: (Note, the box have class .show-limited-content and the show more have class .show-more)

$('.show-more').live("click", function() {
    $('.show-more').live("click", function() {
        $('.show-limited-content').slideDown("slow");
    }); 
    return false;
});
4

1 に答える 1

0

animateメソッドを使用できます。

HTML の記述方法に応じて、次のようになります。

$('.show-more').on("click", function() {  
    $('.show-limited-content').animate({
        height: '500px'
      }, 2000);    
      return false;
  });

実際の動作を確認するには、この作業例を参照してください。

高さが動的に必要な場合は、追加するだけです

var curHeight = $('.show-limited-content').height();

  $('.show-limited-content').css('height', 'auto');

  var autoHeight = $('.show-limited-content').height();

  $('.show-limited-content').height(curHeight);

イベント ハンドラーの上で、animate css を次のように変更します。

height: autoHeight

別の例を次に示します。

于 2013-01-05T14:35:23.567 に答える