問題タブ [jquery-slide-effects]

これが私が求めている効果ですか？残念ながら、jQuery のslideDown()効果は同じではありません。これが私が求めている効果です (コードとデモはjsFiddleにあります)。

jQueryにはanimate()メソッドがあることを認識しています。しかし、MooTool のslideIn()方法と同じ効果を得るには、正確には何が必要なのでしょうか?

画像にカーソルを合わせるとスライドインおよびスライドアウトするオーバーレイを画像に作成しようとしています。この質問と同じ理由-画像上のJQueryテキストslideDown/slideUpオーバーレイがバウンドし続けますか？。

コードをjsFiddleに配置したので、アクセス可能です-http ://jsfiddle.net/jamescallaghan/hg9r7/

どんな助けでも大歓迎です。

アニメーションで背景画像をスライドさせようとしています。私の最初の背景画像なら私が望むように。2番目は開始を継続します

これが私のコードです

最初の画像は正常に機能していますが、空白の画面が表示されます。この空白の画面で私は2番目の次の画面が欲しい

前もって感謝します

改訂版については下部を確認してください

了解しました。これが問題です。私は内側にを持っていliますdiv、そして私はを上にスライドさせて見えるようにするためにホバーしようとしていますli。div

HTMLは次のとおりです。

現在、CSSにこれがあります。

そしてこれは私のJSのために：

CSS psuedo:hoverを使用してポップアップさせることができることは知っていますが、スライドエフェクトを使用したい場合は、すべてJSで実行したほうがよいと思いました。最初の問題は、これが機能していないことです：|。表示されたら、スライドエフェクトを追加したいのですが、これが正しい方法かどうかはわかりません。

ありがとうみんな/ギャル

改訂

新しいJavaScript

これはうまくいきます！上から下がっていますが、下から上に上げる予定でした。

私は正常に動作するドロップダウンメニューを持っていますが、アニメーション、スライドアップ、ダウンなどのjqueryエフェクトを追加したいです。

現在、ulを表示するためにvisiblity hiddenとvisibleを使用しています。他の効果を使用するにはどうすればよいですか。以下のコードは次のとおりです。

私は使用してみました :$('ul', this).slideDown(100); $('ul', this).slideUp(100);成功しません css:

どんな助けでも大歓迎です

このコードを確認してください: http://jsfiddle.net/ZXN4S/1/

HTML:

jQuery:

入力フィールドにテキストを挿入して送信をクリックすると、私が話している問題が表示されます。滑り落ちるとき、スライドの高さが間違っていて、効果が醜いです。ただし、divを削除するinfoとうまく機能します。どうすれば修正できますか？

マウスが画像の上にあるとき、スパンコンテンツは2秒後に下にスライドします。また、カーソルを画像の外に移動すると、2秒後にスパンコンテンツが上にスライドします。これは問題なく機能します。

誰かがそのスパン上にマウスを移動した場合にもスパンを表示したいのですが、そこから問題が始まります...

私が十分に明確であったかどうかはわかりませんが、コードは言葉以上のものを教えてくれると思います:)

リンク： http： //jsfiddle.net/zDd5T/3/

HTML：

CSS：

JavaScript：

前もって感謝します！

slideToggle()テキストを含むDIVで単純なjQueryを実行しようとしていますが、slideDownアニメーションがスライドするDIVの下部に近づくにつれて、アニメーションが非常に遅くなる（ためらうようです）ことがわかりました。

このコードと例はここにあります。私はいくつかのコンピューターと人気のあるブラウザーのすべての最新バージョンでテストしましたが、すべて同じように動作します。不思議なことに、 jsFiddleでまったく同じページを実行すると、スムーズになります。

何か案は？

アップデート

これの一部は、他の誰かが示唆したように、アニメーションが実行される前にjQueryがスライドするDIVの高さを知らないようです。スライド式DIVのコンテンツは動的で、非常に短いかやや長いので、私もそうではありません。そこで、jQueryで非表示にする前にDIVの高さを取得し、それに応じてCSSの高さを設定してみました。ややスムーズなアニメーションのために作られましたが、おそらく最良の解決策ではありません-デモ

更新2

問題は、最初の例でのいくつかのCSSの問題が原因であるように見えます。まず、DIVが多すぎます。次に、スライディングDIVにはパディングセットがありました-とはうまく機能しません。最後に、スライディングDIVは（ボタン）DIVtoggleSlideも含むコンテナDIVにありました。#control-container

DIVを2つに減らし（スライディング要素の外側のDIVとスライディングDIV自体）、外側のスライディングDIVパディングを設定しないことでうまくいくようです-最後の例。

わかりました。3つのアイコンがある固定ナビゲーションサイドバーがあります。アイコンをクリックすると、div（負のマージンで非表示）がスライドアウトします。ボタンをもう一度クリックすると、表示されているdivが非表示になります（スライドアニメーションを介して）。このアクションは、他の2つのアイコンに対して繰り返されます。

これを実行するにはさまざまな方法があり、さまざまな意見を持つ多くのサポートドキュメントがあります。.animate（{"left"： "+ = 56px"}、 "slow"）を使用して.clickを介してアクションを宣言しようとしました。また、onclickを起動する関数も作成しました。私が気付いているのは、この単純なタスクを必要以上に簡単に複雑にすることができるということです。

これを実行するための最もクリーンな方法の提案はありますか？

編集：入力してくれたみんなに感謝します。トグル、それは本質的にミニマリストですが、左から右に移動しません。私が使用することになったスクリプトは次のとおりです。

スライドインし、その下のコンテンツを「エレガントに」スライドさせながらスライドさせる単純なメッセージを作成しようとしています。私が抱えている問題は、メッセージの下のコンテンツがエレガントにスライドせず、「ジャンプ」していることです。アニメーションが始まる前に、メッセージの高さいっぱいまで。メッセージが非表示になった場合も同様です。メッセージは上にスライドしますが、アニメーションが完了してコンテンツが元の位置に戻るまで、高さは同じままです。

超単純化された JSFiddle: http://jsfiddle.net/U94qD/2/

コード (JSFiddle がダウンしている場合):

HTML:

JS:

注:代わりに「slideDown」および「slideUp」メソッドを使用してみましたが、アニメーションは同じように機能しません。コンテンツを下にスライドさせる代わりに、div の高さを調整してコンテンツを表示します。これは、「スライド」ではなく「ブラインド」アニメーションと呼ばれるものです。