今日は、アニメイトを使用してスライドスイッチング効果を実現するという小さな例を共有します
誰もが、jQueryがスライド効果を達成するためのいくつかの方法を提供していることを知っています。
1.Slidedown（）
2.slideup（）
3.slidetoggle（）
ただし、上記のスライディングは、スライドの方向を制御するのに便利ではないので、自分で書いてみましょう。 。 。
コードは次のとおりです。
<！Doctype html> <html> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = chrome = 1"> <title>例</title> <meta name = "description" content = ""ボディ{幅：100％;高さ：自動; } .content {width：150px;高さ：50px;位置：絶対;トップ：20px;左：20px;オーバーフロー：隠し;背景色：赤; } .slide-box {width：300px;位置：相対; } .slide1 {width：150px;高さ：50px;フロート：左;ディスプレイ：インラインブロック。ラインハイト：50px;テキストアライグ：センター;バックグラウンドカラー：＃bdd8cf; } .slide2 {width：150px;高さ：50px;フロート：そうです;ディスプレイ：インラインブロック。ラインハイト：50px;テキストアライグ：センター;背景色：＃C1C4C4; } </style> </head> <body> <div> <div> <span>右側の要素</span> </div> </div> <script src = "js/jquery-1.11.2.min.js" type = "text/javascript" charset = "utf-8"> </script> <"> $（ "。content"）。hover（function（）{$（ "。スライドボックス"）上記のコードは、完全なスライド効果を実現できます。しかし、注意すべきことの一つ
上の図に示すように、マウスが迅速に移動したときに生成された複数のイベントを防ぐためにSTOP（）イベントを追加する必要があり、スタックチームを形成し、マウスを除去した後にスライドまたは点滅の効果を引き起こします。
上記の記事は、スライドスイッチング効果[サンプルコード]が私があなたと共有するすべてのコンテンツであることを認識しています。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。