ID:IAMeva さんの質問

jQueryのtoggleで、次に来る要素も滑らかに動かすにはどうしたらいいのでしょうか？
↓の場合2個目のtargetは消えた要素があった場所に一瞬で移動してしまうので、違和感があるんですよね。
$(".target").on("click",function(){
$(this).next().toggle("drop");
})
<div class="target">target</div>
<div class="targetbody">本文</div>
<div class="target">target</div>
<div class="targetbody">本文</div>

みんなの回答 6 件

ID:lkUVL4 さんの回答

ID:IAMeva

そうですか？とっかかりがつかめたら一人で歩き出す人もいると思いますけどね

ID:tzhxl2

1人で歩けないからココを歩いて...まっいっか

ID:G/L6re

雑魚には優しく！己には厳しく！

ID:SQwx18 さんの回答

ID:IAMeva

ありがとうございます
queue()はtoggleなどの処理に割りこませられるんですか？
一連の処理が終わらないと別の処理を呼び出せないものだと思ってました

ID:8bLNtO さんの回答

ID:IAMeva

ありがとうございます。
続く要素が一瞬で移動してしまうものに対して、滑らかに動かす処理を追加する考え方みたいなものを教えてもらえたらいいなと思って質問したので、できればblindではないほうがいいです。

ID:8bLNtO

それだったら、考え方としては .toggle(’drop’) の処理が終わった直後に.toggleで消えた要素分の高さを次に続く要素のmargin-topとして与えてやって、それをアニメーションで徐々に縮めてやればイケるんじゃないですか？

ID:o9LmSl さんの回答

ID:4Xoe2. さんの回答

ID:4Xoe2.

CSS
.target{
height: 100px;
transition: height .5 linear;
}
.animatino+.tagetbody{
height: 300px;
}

JS
$(".target").on("click",function(){
$(this).toggleClass("animation");
});

英数字のみでコメントすることはできないんですってよ。

ID:4Xoe2.

目的によってはCSSだけでも。
<div class="target" tabindex="0">target</div>
<div class="targetbody">本文</div>

CSS
.target{
height: 100px;
transition: height .5 linear;
}
.target:foucs+.tagetbody{
height: 300px;
}

ID:smUl.C さんの回答

最終更新日:2015-04-15 (4,642 views)