web-dev-qa-db-ja.com

jqueryでクリック時にdivの高さを変更する

次のコードを使用して、div要素の高さを拡張しようとしています。

html：

<div id="expandbtn">more..</div>

<div id="portfolio"><div class="itemweb" title="lol" rel="#derp"><div class="thumb"><img src="images/items/skills.jpg" title="Skills" rel="#derp"/></div>

脚本：

$('#expandbtn').click(function(){
$('#portfolio').animate({height:'72px'}, 500);});

css：

#portfolio {
width:914px;
height:295px;
margin:0 0 0 -8px;
overflow:hidden;}

しかし、それは機能しません。私は何が間違っているのですか？

jqueryheightjquery-animate
8
user1081953

あなたのコードは大丈夫です。あなたも試すことができます

$('#portfolio').css("height","74px");

はっきりと視覚化するために、背景色や画像を入れてみてください

フィドル： http://jsfiddle.net/49HQM/4/

23
dku.rajkumar

ドキュメントの準備ができたら、ロードしてみてください。

  $(document).ready(function(){
      $('#expandbtn').click(function(){
      $('#portfolio').animate({height:'72px'}, 500);
   });
3
user3470042

それは問題なく動作しますが、 THIS FIDDLE のように、位置と背景色を設定して要素を確認してみてください。

また、ポートフォリオdiv内の要素の高さをアニメーション化することはありません（それらの要素のサイズがパーセントである場合を除く）。

0
adeneo