【まとめ】jQueryアニメーションベース/タイマー

3231 ワード

アニメーションDOMとそのCSSの操作

  • 原理は、DOM要素のCSSスタイルを少しずつ(幅や高さが10%増加するなど)修正するたびに、0.1 sのような一定の時間間隔でアニメーションのように見える必要があります.
  • jQueryは3種類のアニメーション関数をカプセル化している.1.show(),hide(),toggle().ターゲット要素の幅、高さ、透明度の3つのCSSプロパティを制御します.2.fadeIn()、fadeout()、fadeToggle()は、幅の高さを制御せず、透明度のみを制御します.3.slideDown()、slideUp()、slideToggle()は、高さと透明度を制御し、幅#カスタムアニメーションanimate()を制御しないで任意のアニメーション効果を実現し、パラメータ量DOM要素の最終的なCSS状態と時間を伝達する必要があります.構文:$(selector).animate(styles,speed,easing,callback)例:
    • var div = $('#test');
div.animate({opacity:0.25,
width:'256px',
height:'256px'},3000);

    パラメータ:
  • speedオプション.エレメントが非表示から完全に表示になるまでの速度を指定します.既定は0です.可能な値:ミリ秒(たとえば1500)[slow](slow)[normal](normal)[fast](fast)速度を設定すると、要素が非表示から完全に表示になるまで徐々に高さ、幅、外側、内側、透明度が変化します.
  • callbackオプション.show関数の実行が完了したら、実行する関数.

    • stop()stop()メソッドは、現在実行中のアニメーションを停止します.構文:$(selector).stop(stopAll,goToEnd)
  • stopAllオプション.選択した要素のすべてのキューに追加されたアニメーションを停止するかどうかを指定します.
  • goToEndオプション.現在のアニメーションの完了を許可するかどうかを指定します.このパラメータはstopAllパラメータが設定されている場合にのみ使用できます.delay()delay()メソッドは、キュー内の次の実行に遅延を設定します.構文:$(selector).delay(speed,queueName)
  • speedオプション.遅延速度を定める.可能な値:
  • ミリ秒
  • “slow”
  • “fast”

  • queueNameオプション.キューの名前を指定します.デフォルトは「fx」で、標準効果キューです.show()/hide()は、show()とhide()を直接無パラメータで呼び出し、DOM要素を表示および非表示にしますが、時間パラメータを1つ渡すだけでアニメーション構文になります.$(selector).show(speed,callback)たとえば、
    • var div = $('#test-hide');
div.hide(2000);// 2

    パラメータ:
  • speedオプション.エレメントが非表示から完全に表示になるまでの速度を指定します.既定は0です.可能な値:ミリ秒(たとえば1500)[slow](slow)[normal](normal)[fast](fast)速度を設定すると、要素が非表示から完全に表示になるまで徐々に高さ、幅、外側、内側、透明度が変化します.
  • callbackオプション.show関数の実行が完了した後、実行する関数はspeedパラメータが設定されていない限り設定できません.

    • toggle()現在の状態に基づいてshow()とhide()構文:$(selector).toggle(speed,callback,switch)パラメータ:
  • speedオプション.エレメントが非表示に見える速度(または逆)を指定します.既定は0です.可能な値:ミリ秒(たとえば1500)[slow](slow)[normal](normal)[fast](fast)速度を設定すると、要素は表示可能な非表示の過程から、高さ、幅、外側距離、内側エッジ距離、透明度が徐々に変化します.このパラメータを設定すると、switchパラメータは使用できません.
  • callbackオプション.toggle関数の実行が完了したら、実行する関数.speedパラメータが設定されていない限り、このパラメータは設定できません.
  • switchオプション.ブール値toggleが選択したすべての要素を非表示または表示にするかどうかを指定します.True-すべての要素Falseを表示-すべての要素を非表示このパラメータを設定した場合、speedおよびcallbackパラメータは使用できません.

    • fadein()/fadeout()フェードアウトもopacityプロパティを設定し続けることで実現され、透明度のみをコントロールするプロパティと使い方は**show()/hide()と同じfadeToggle()要素が見えるかどうかによって次のアクションプロパティと使い方をtoggle()**と同じで、透明度のみをコントロールします
    slideUp()/slideDown()slideDown():表示;slideUp():消えます.シャッター巻きに似ています.ドロップダウンメニューの効果によく使用されます.slideToggle()は、全体的にブラインド効果です.構文:$(selector).slideUp(speed,callback)パラメータ:
  • speedは前のspeedと同じ
  • callback前のcallbackと同じ
    • スライドエフェクト(高さの変化)を使用して、要素の表示状態を切り替えます.slideToggle()選択された要素が表示されている場合は非表示、選択された要素が非表示の場合は表示されます.$(selector).slideToggle(speed,callback)パラメータ同上

    タイマ


    settimeout()およびsetInterval()構文:指定したミリ秒数後に関数または計算式を呼び出すためのsetTimeout(code,millisec)メソッド
  • settimeout()はcodeを1回のみ実行します.複数回呼び出す場合はsetInterval()を使用するか、code自身にsetTimeout()を再度呼び出すようにします.


    • 本人簡書転送ドア:https://www.jianshu.com/p/8d8fc50bdeb4
    CSS(E+F)隣接セレクタを使用して、複数の兄弟要素の最初のスタイルを設定します.
    JS CSSを使用してIEリンク破線ボックスを除去する3つの方法