ホームページ > 記事 > ウェブフロントエンド > JQueryアニメーションのhide()とshow()の使い方解説1（コード例）
JQueryアニメーションのhide()とshow()の使い方解説1（コード例）
- 不言転載
- 2019-01-18 10:45:202334ブラウズ
この記事の内容は、JQuery アニメーションでの Hide() と show() の使用に関するものです (コード例)。必要な方は参考にしていただければ幸いです。助けます。
hide() メソッドと show() メソッドでは、アニメーション効果を設定できます。この記事では、これら 2 つのメソッドの効果について説明します。
hide (パラメータ 1、パラメータ 2):
パラメータ 1: オブジェクトが非表示になるまでの時間を示す時間 (ミリ秒単位)
パラメータ 2: コールバック関数、この関数はオブジェクトが非表示になった後に起動されます。
show(パラメータ 1, パラメータ 2):
パラメータ 1: 上記と同じ
パラメータ 2: 上記と同じ
例:
要件の説明: 画像をクリックすると、画像が徐々に非表示になり、後の画像が前の画像の位置を補完します。
コードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
img{
width: 100px;
height: 80px;
}
#pics div{
float: left;
margin: 2px;
width: 100px;
height: 80px;
}
</style>
<script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
//获取所有的图片,并注册点击事件
$("#pics>div").click(function(){
$(this).hide(800,function(){
//回调函数，清除当前点击的元素
$(this).remove();//方法移除当前调用这个方法的元素---自杀
});
});
});
</script>
</head>
<body>
<div id="pics">
<div><img src="images/01.jpg" ></div>
<div><img src="images/02.jpg" ></div>
<div><img src="images/03.jpg" ></div>
<div><img src="images/04.jpg" ></div>
<div><img src="images/05.jpg" ></div>
</div>
</body>
</html>
注: $(this).remove();//方法移除当前调用这个方法的元素---自杀
以上がJQueryアニメーションのhide()とshow()の使い方解説1（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。