jQuery——クラス操作、show関数、スライド方法、イベント切替、キュー停止stop方法及びカスタムアニメーション方法

jQueryは通過できる.css(「プロパティ名」)操作cssスタイル

括弧には、キー値のペアの形式があります.たとえば、次のようにします.

$("div").css({
    width:400px,
    height:200px,
    backgroundColor:"red"//               ，       ，     
})

 

しかし、開発ではクラスの操作がより多く使用されています。

1、クラスaddClassを追加()
$("div").addClass("current")
2、クラスremoveClass()を削除する
$("div").removeClass("current")
3、切り替えクラスtoggleClass()
$("div").toggleClass("c")
 
jQueryクラスの操作は元のクラスに影響しません!!たとえばaddClass()は1つのクラスを追加することに相当し、元のクラスを上書きしません.

show ( [ speed , [ easing ] , [ fn ] ] ) 

パラメータは直接省略でき、アニメーションは

を直接表示する.

speed:アニメーション速度を指定します.使用可能:slow、normal、fast、またはアニメーション時間のミリ秒値.例:1000

easing:切り替え効果を指定します.デフォルトは「swing」で、パラメータ「linear」が使用できます.

fn:コールバック関数、アニメーション完了時に実行される関数、要素ごとに

を1回実行
hideメソッド,toggleメソッドとshowメソッドのパラメータテーブルが一致する
slideDown()メソッドslideDown()メソッド:下スライド
slideUp()メソッドslideUp()メソッド:スライドアップ
slideToggle()メソッドslideToggle()メソッド:スライド切り替え
いくつかのメニューバーはこれを使って、showよりもっと美観性があります

イベント切替hover([over,]out)

over:エレメント上でトリガーする関数にマウスを移動
out:要素をマウスで移動してトリガーする関数
一部の関数はhoverに1つの関数だけを書くことで2つの効果を達成することができます.例えば、slideDown()とslideUp()は1つのslideToggle()だけを書くことができます.

$(".nav>li").hover(function(){
       $(this).children("ul").slideToggle();
})

 

キューの停止:stop()

スライドアニメーションがトリガーされると実行され、複数回トリガーされると、複数のアニメーションの効果がキューに並んで実行されます.
この状況をエフェクトキューと呼ぶのは、明らかに私たちが見たいものではないので、解決策が必要です:stop()
stop()は必ずアニメーションの前に書きます.例えば:

$(".nav>li").hover(function(){
       $(this).children("ul").stop().slideToggle();
})

 

カスタムアニメーション

animate(params,[speed],[easing],[fn])
params:変更したいスタイルプロパティをオブジェクト形式で渡す
栗を挙げます.

$(function() {
    $("button").click(function() {
        $("div").animate({
            left: 500,
            top: 300,
            opacity: .4,
            width: 500
        }, 500);
    })
})