W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

ID:20FSz5 さんの質問

<li><img><li>となっており、liにはimgの一部分を表示させたいので、width指定してあります。ここにマウスを乗せた時に、imgが全て表示されるようにしたいのですが、animateで開きたいのです。cssだと:hover{ width: auto; }で解決なのですが、jQueryで同じくanimate({ width: "auto" })と書いてもうまく動きません。もちろん、animateでwidthを数値で指定すればうまく動きます。img分の幅をアニメーションで開かせるには、どのようにすればいいのか、ご教授願えないでしょうか?宜しくお願い致します。

みんなの回答 4 件

ID:c15F.Q さんの回答

普通に考えてimgのwidthを実数で取得して指定するよね。

ID:nTuZi2 さんの回答

ローディングか何かいれて、
裏で、最初に
$("img").width();
を変数(例:aaa等)の中に取得しておき、
一旦widthを0にし、そのタイミングで
ローディングを終わらせ、
そこから
animate({ width: aaa })
とすれば良いんじゃないかな。

ID:cHAsCZ

一つ目のliには幅90pxの画像、二つ目のliには幅100pxの画像、といったように幅がまちまちなのです。なので、liには各々のimgのwidthを代入したいのです。こういった場合、どうすればいいのか分からなくて。可能でしょうか?

ID:iNpZto

まず配列を作って、liをeachで繰り返し処理でさっきの配列に値を格納すればどうですか。

ID:w2u.2R さんの回答

li のhoverの最初のfunctionの中にvar yokohaba = $(this).children().attr("width")で画像の横幅を取得して、あとはanimateの中のwidth値にyokohabaを設定すれば上手くいくはず。

ID:nO8YRg

ご回答いただき、ありがとうございます。こちら、試してみたのですが、やはり一つ目の画像幅になっちゃいますね。例えば90pxと100pxがあった場合、100pxのliも90px分しか幅が伸びない感じです。この動き、難しいのでしょうか。。

ID:iHUSLa さんの回答

回答下さいました皆様
皆様からの知恵をお借りしjQueryを弄ってるうちに、解決出来ました!
本当に助かりました。
ありがとうございました!m(_ _)m

最終更新日:2013-05-28 (2,589 views)

関連するトピックス

ページ上部に戻る