クリックで画像の高さをアニメーションで変更させたい

Question

#クリックで画像の高さをアニメーションで変更させたい
初歩的な質問かもしれませんが、上手くいかないのでご教示ください。

画像を50pxだけ表示し、画像をクリックすると残りの高さ分の画像をアニメーションで表示させたいのですが、アニメーション（下にゆっくりスライド）だけが上手くいきません。
いろいろ試してはいるのですが、ダメでした・・・。
jQueryを利用しています。

ul li {
  overflow: hidden;
  height: 50px;
  cursor: pointer;
}

ul li.active {
  height: auto;
}

$(function(){
  $('ul li').on('click', function(){
    $(this).toggleClass('active');
  });
});

Comments

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

Answer 1

autoに向けてのアニメーションは出来ないので、高さを事前に取得して指定するか、もし高さが固定ならCSSで処理できます。

ul li {
  overflow: hidden;
  /*height: 50px;*/
  cursor: pointer;
  padding: 1em 0;
}
ul li img {/*ADD*/
  transition: all 1s ease 0s;
  margin-bottom: -100px;
}

ul li.active img/*ADD*/ {
  /*height: auto;*/
  margin-bottom: 0;
}
```**動くサンプル：**[https://jsfiddle.net/3kx22v27/](https://jsfiddle.net/3kx22v27/)

---

高さを取得する↓サンプル。

```CSS
ul li {
  overflow: hidden;
  height: 50px;
  cursor: pointer;
  margin: 1em 0;
  position: relative;
  transition: all 1s ease 0s;
}
ul li img {
  position: absolute;
  top:0;
  left:0;
}

ul li.active {
  /*height: auto;*/
}

$( function() {
	$( 'ul li' ).each( function() {
		var height = $( this ).find( 'img' ).height();
		$( this ).on( 'click', function() {
			if ( $( this ).hasClass( 'active' ) ) {
				$( this ).stop().animate( { 'height': '50px' }, 'slow' );
			} else {
				$( this ).stop().animate( { 'height': height + 'px' }, 'slow' );
			}
			$( this ).toggleClass( 'active' );
		} );
	} );
} );
```**動くサンプル：**[https://jsfiddle.net/3kx22v27/1/](https://jsfiddle.net/3kx22v27/1/)

Comments

[jyoze]

kei344さん
ご回答ありがとうございます。
高さを取得する方法で無事解決できました！
デザイン上、最初に表示する画像の高さがバラバラなので、cssのnth-of-typeを使い、
一つ一つにheightを指定しました。
書き方が合っているかわかりませんが、無事に動きました。
本当にありがとうございます。

$( function() {
$( 'ul li' ).each( function() {
var height = $( this ).find( 'img' ).height();
$( this ).on( 'click', function() {
if ( $( this ).hasClass( 'active' ) ) {
$( 'ul li:nth-of-type(1)' ).stop().animate( { 'height': '50px' }, 'slow' );
$( 'ul li:nth-of-type(2)' ).stop().animate( { 'height': '30px' }, 'slow' );
$( 'ul li:nth-of-type(3)' ).stop().animate( { 'height': '10px' }, 'slow' );
$( 'ul li:nth-of-type(4)' ).stop().animate( { 'height': '18px' }, 'slow' );
$( 'ul li:nth-of-type(5)' ).stop().animate( { 'height': '50px' }, 'slow' );
} else {
$( this ).stop().animate( { 'height': height + 'px' }, 'slow' );
}
$( this ).toggleClass( 'active' );
} );
} );
} );