問題タブ [jquery-effects]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
jquery - jqueryの輝き効果、トリガーとしてホバーなしでアニメーション化
Addy Osmani によるこの素晴らしいJquery シャイン タイムを使用しています。私がしたことはすべてコピーして貼り付けただけなので、完全に正常に動作します:D
しかし、最初にホバーすることなく、画像が読み込まれるとすぐに定期的に自動的にアニメーション化するシャイン効果が必要です。どうすればこれを達成できますか? 正直なところ、jquery や javascript に関してはほとんど知識がありません。
コードは次のとおりです。
助けてください、ありがとう
よろしく
javascript - 検証+リスナー+スライドダウンパネル
フォーム要素は2つだけです。数字用です。数値が一致する場合(validateを使用)、スライドパネル(div)を開きます。
アンカーボタンやリンクはありません。
私が見つけた問題は、2回目のフィールドマッチが成功すると、パネルが下にスライドするきっかけになっています。ユーザーが2番目の入力フィールドから離れてクリックするのではなく、イベントの一致をリッスンして、成功するとdivが表示されるようにします。
それらが一致しない場合、またはユーザーが入力を変更した場合、divは閉じます。
...................ここにいくつかのコードがあります。
検証:
スライダーは、jQueryの両方で使用、切り替え、スライドできるさまざまなバージョンのようです。
私の問題は、イベントリスナーが2番目の入力フィールドからスライダーパネルをトリガーするようにしたいことです。ユーザーが他の場所をクリックする必要はありません。
したがって、2番目の入力フィールドに入ると、一致するとすぐにスライダーが開きます。
助けていただければ幸いです。
Davids HelpでOK、これは私がこれまでに持っているものです:
検証:
以下に記載されているjQueryハンドラーコード
フォーム要素は次のようになります:モバイル1
onKeyUp = "limitText(this.form.mobile1、this.form、10);" maxlength = "10" />
モバイル2
onKeyUp = "limitText(this.form.mobile2、this.form、10);" maxlength = "10" />
アニメートしたいDiv要素:
hello world </ div>
それについてです。
javascript - stopを使用したjqueryアニメーションの問題
slideDown() のような Jquery アニメーションを実行すると、いくつかの要素固有の css プロパティが特定の間隔で更新されるように設定されているように見えます。アニメーションが完了すると、これらのプロパティは設定解除され、表示プロパティは単純に auto またはに設定されます。なんでもいい。少なくとも firebug では、これらの一時的なプロパティは表示されなくなりました。
私が遭遇した問題は、stop() でスライド ダウンを停止するシナリオです。その後、要素には現在の一時的な css 値が残されます。しなければならないのでこれは問題ありませんが、少し時期尚早にスライドを元に戻すことにしたため、スライドダウンを停止したとしましょう。次のようになります。
上記のコードはあまり意味をなさないかもしれませんが、ポイントは次のとおりです
。1 秒間下にスライドした後、アニメーションは停止し、上にスライドし始めます。魅力のように機能します。
しかし!!!そして、ここに問題があります。スライドが戻ると、要素の css プロパティは、slideDown() アニメーション (stop() が呼び出されたとき) に 1000 ミリ秒あった正確な値にリセットされます。ここで、次を実行しようとすると:
以前のslideDownが中止されたポイントまでスライドダウンし、それ以上半分の速度ではありません(約半分の高さで同じ時間を使用するため)。これは、css プロパティが表示どおりに保存されたためです。しかし、それは特に望んでいるわけではありません。もちろん今回はずーっとずらしていきたいです。
すべてがすぐに壊れる可能性があると予測するのは難しい UI の相互作用が原因です。使用するアニメーションが長いほど、このようなことが起こるリスクが高くなります。
これはバグと見なされますか、それとも何か間違ったことをしていますか? それとも、サポートされていない機能なのでしょうか?
コールバック関数を使用して css プロパティをリセットできると思いますが、使用するアニメーションに応じて、異なる css プロパティを使用してレンダリングするため、背中を覆うことはそれほど派手なソリューションにはなりません。
jquery - JQueryでは、制限時間が経過した後に発生する効果をキューに入れる方法はありますか?
jQuery を使用して Web ページのメッセージ通知を作成しようとしています。メッセージは下から上にスライドし、10 秒後に下にスライドします。問題は、s を使用するのではなく、可能であれば jQuery 効果システムを介してタイミングを設定したいということですsetTimeout
。かなり洗練されていないソリューションはどれですか?
jQuery を使用して、特定の時間間隔の後に発生する効果をキューに入れるにはどうすればよいですか?
jquery - jQueryサイクル-1サイクルに2つのアニメーション
jQuery Cycleでスライドショーを作成しましたが、タイマーに問題があります。数サイクル後、彼らは混乱しています。2つのサイクルアニメーションを1つの関数と1つのタイマーにマージするにはどうすればよいですか?
助けてくれてありがとう。
xHTML:
jQuery:
jquery - jqueryを使用した.blur関数の問題
focus()
画像をズームインおよびズームアウトするアプリケーションがありますblur()
。元の画像サイズを読み、それに15pxを追加して、ズームイン効果を作成しました。これは正常に機能します。問題は、私が読んだ元の画像サイズを渡そうとしている.blur()
が運が悪いズームアウト効果にあります。誰かが私がこの問題を解決するのを手伝ってもらえますか?
jquery - 非表示の要素がアニメーション化するときのJQueryのスライドアップ/スライドダウンのトリガー
WordPress ページで JQuery を使用して、mouseenter イベントで非表示の要素をアニメーション化しています。hidden 要素は、画像のサムネイルを含む div にマウスが入ると下にスライドするテキスト ブロックです。私はアニメーションを機能させていますが、非表示の要素が下にスライドすると、要素をスライドアップして望ましくないヨーヨー効果を与えるマウスリーブ機能がトリガーされます。マウスが実際にサムネイルを持つ要素を離れない限り、mouseleave関数が呼び出されないように、下にスライドする要素を無視するようにJQueryに指示する方法を知っている人はいますか? 結果はここで見ることができます:
http://jeremypiller.com/wordpress
どんな助けでも大歓迎です。
これがCSSです(WordPressで生成されたクラスを操作しています):
HTML:
そしてJQuery:
jquery - jQuery の連鎖効果
このマークアップを含むメニューを持つ Web サイトをコーディングしています。
基本的に 2 つのメイン カテゴリ ("grafico" と "producto") があり、それぞれにサブカテゴリ ( ul.categories-menu
) とプロジェクト ( ul.projects-menu
) があります。
また、サブカテゴリのそれぞれには、rel
属性に一種の「id」があり、各プロジェクトには、rel
属しているサブカテゴリのコンマ区切りのリストが属性にあります。
だから、私が達成したいのは、サブカテゴリのリンクをクリックすると、そのrel
サブカテゴリのrel
値に含まれるこのカテゴリのすべてのプロジェクトが「強調表示」される (別の色に変わる) が、「カスケード」方式であるということです。 (上から下にプロジェクトの色が変化します)、その後、別のサブカテゴリ リンクをクリックすると、すべてのプロジェクトが元の色に変わり、ハイライト カスケードが属するプロジェクトで再び開始されます。新しくクリックされたサブカテゴリ。
また、xcolorプラグインを使用して、animate()
関数がハイライトの色をスムーズに変更できるようにしています。
これはこれまでの私の(簡略化された)コードです:
このコードは非常にうまく機能しますが、「カスケード」効果は完全には機能していません。たとえば、プロジェクト 1、3、4、および 6 が強調表示されている場合 (最初のカスケードは適切に機能します)、プロジェクト 1 を強調表示する別のサブカテゴリをクリックすると、 、4、5、6(注1、4は共通)、
- 私が望むのは、すべてのプロジェクトがデフォルトの色に戻され、プロジェクト1、4、5、および6が少し遅れて次々と強調表示されることです
- 私が得るのは、すべてのプロジェクトがデフォルトの色に戻され、プロジェクト5、6、1、および4が少し遅れて次々に強調表示されることです(1と4は、最初に戻るのに時間がかかるため、後で強調表示されます)古い状態に)
私の問題をうまく説明できれば幸いです。この小さな問題を解決するために誰かが私を正しい方向に向けることができますか?
ありがとうございました
jquery - 複数の要素でキューに入れられたアニメーション
jQueryを使用して複数の要素でアニメーションをキューに入れる方法を見つけようとしています。
たとえば、画面上で要素を移動する必要があります。それが終わったら、次のものに移動します。
これはおそらくアイテムのリストです.. 適切な位置に.. 1つずつ。
誰か助けてくれませんか?
次のアニメーションを開始するには、各アニメーションの onComplete 関数を使用する必要がありますか?
更新: 簡単な例。
一つ一つフェードインさせていきたいです。SO アイテム 1 がフェードインします。それが完了すると、アイテム 2 がフェードインします。
jQuery を使用して、いくつかの Flash の「ページ ビルド」タイプのアニメーションを HTML に変換しています。そのため、複数の要素でアニメーションをキューに入れる必要があります。ボックスを表示させ、その上にテキストをスライドさせるなど..
jquery - jQueryは、ホバー時に要素をあるクラスから別のクラスにフェードします
これはできますか?
たとえば。
マウスが要素の上にあるときにclass1からclass2にフェードし、マウスが外にあるときにclass1に戻すことはできますか?