jQueryループアニメーションとコンポーネントsize_jqueryの取得方法
この記事の例では、jQueryのループアニメーションとコンポーネントサイズの取得方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。
1. はじめに
1. jQuery の animate() メソッドを使用すると、カスタム アニメーションを作成できます。
animate() メソッドはほぼすべての CSS プロパティを操作できますが、animate() を使用する場合は、すべてのプロパティ名を Camel 表記で記述する必要があります。たとえば、padding-left の代わりに paddingLeft を使用し、marginRight を使用する必要があります。マージン右の代わりに、待ちます。また、カラー アニメーションは、コアの jQuery ライブラリには含まれていません。カラー アニメーションを生成する必要がある場合は、jquery.com からカラー アニメーション プラグインをダウンロードする必要があります。
2. jQuery を使用すると、要素とブラウザ ウィンドウのサイズを簡単に処理できます。
jQuery は、要素とブラウザ ウィンドウの寸法を取得するために次のプロパティを提供します。
2. 基本目標
以下に示すように:
Web ページに 2 つのボタンを作成します。1 つのボタンでコンポーネントのサイズを表示状態と非表示状態の間で切り替えることができ、1 つのボタンでループ アニメーションの開始状態と停止状態を切り替えることができます
Simple JQ にはアニメーションの再生を一時停止および開始する機能がありません。これを完了するには、jQuery Pause プラグインをダウンロードする必要があります。この例では、ループ アニメーションは JavaScript によってのみ制御されているため、各一時停止はループ本体が 1 回完了したときにのみ中断でき、任意の位置で一時停止および開始する機能は実現できません。
3. 製造工程
以下は Web ページのすべてのコードであり、後で部分ごとに説明します。
<スクリプト>
var 間隔;
変数 i = 0;
var j = 0;
関数 divanimate() {
$(".d_class").animate( {left : " =100px"}, 500);
$(".d_class").animate( {top : " =100px" }, 500);
$(".d_class").animate( {left : "-=100px"}, 500);
$(".d_class").animate( {top : "-=100px" }, 500);
}
関数cycle() {
divanimate();
間隔 = setInterval("divanimate()", 2000);
}
$(document).ready(function() {
$("#stop").click(function() {
私 ;
if (i % 2 != 0)
サイクル（）;
それ以外
クリアインターバル(間隔);
});
$("#show").click(function() {
j ;
if (j % 2 != 0) {
var txt = "";
txt = "
高: " $("#d_id").height() "px";
txt = "宽: " $("#d_id").width() "px
$("#d_id").html(txt);
} else {
var txt = "";
$("#d_id").html(txt);
}
});
})