JQ を使用して、最も基本的なフェードインおよびフェードアウト効果をデモの anime

JQ を使用して、最も基本的なフェードインおよびフェードアウト効果をデモの anime_jquery で作成します。

WBOY

リリース： 2016-05-16 16:32:27

オリジナル

1247 人が閲覧しました

jQuery は JavaScript の拡張機能である JavaScript ライブラリであり、さまざまな特殊効果に対する高まるニーズを満たすために使用されます。その本質はJavaScriptです

JQ を説明するために、基本的な JQ プログラムを書いてみましょう。

1. 基本的な目標

Web ページには次の 3 つのボタンがあります。1 つはテキストを非表示にすることのみ、1 つはテキストを表示することのみ、1 つはテキストの非表示と表示を同時に行うことができます。1 回クリックすると表示され、もう一度クリックすると非表示になります。サイクルは無限です。

2. 製造工程

1. まず、JQ 公式 Web サイトから JQ サポートファイルをダウンロードし、サイトフォルダーに配置する必要があります。このサポートファイルは jQuery1.11 です。jQuery 公式 Web サイトにアクセスして、古いブラウザ IE6 と互換性のある jQuery1.11 をダウンロードできますが、古いブラウザ IE6 と互換性のない jQuery2 はダウンロードできません。

2. Web ページのコード全体は次のとおりです。説明のために断片に分けています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="js/jquery-1.11.1.js"></script> 
<script> 
$(document).ready(function() { 
$("#hide").click(function() { 
$("#text").hide(); 
}); 
$("#show").click(function() { 
$("#text").show(); 
}); 
$("#toggle").click(function() { 
$("#text").toggle(); 
}); 
}); 
</script> 

<!-- 

<style type="text/css"> 
#text{ 
display:none 
} 
</style> 

--> 

<title>JQ淡出与显示</title> 

</head> 
<body> 

<p id="text"> 
被折腾的文本 
</p> 

<button id="hide"> 
隐藏 
</button> 
<button id="show"> 
显示 
</button> 
<button id="toggle"> 
隐藏/显示 
</button> 

</body> 

</html>

ログイン後にコピー

(1)<ボディ部分>

<head>部分主要是实现核心代码部分，放在后面来讲，先说<body>部分

<body> 
<!--这是定义一段ID为text的文本，便于脚本控制--> 
<p id="text"> 
被折腾的文本 
</p> 

<!--分别设置ID为hide,show,toggle的按钮--> 
<button id="hide"> 
隐藏 
</button> 
<button id="show"> 
显示 
</button> 
<button id="toggle"> 
隐藏/显示 
</button> 

</body>

ログイン後にコピー

(2)

<head> 
<!--网页的编码，声明要使用JQ--> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script type="text/javascript" src="js/jquery-1.11.1.js"></script> 
<script> 
<!--JQ的代码编写首先要用$(document).ready(function() {});去定义一个总函数，缺少这个函数提供的框架之后的东西无法执行--> 
$(document).ready(function() { 
<!--之后再于这个函数内编写需要的函数--> 
<!--对于ID为hide这个按钮的click动作进行函数的调用，之后的动作依旧放在这个一个函数的里面--> 
$("#hide").click(function() { 
<!--隐藏ID的为text的文本--> 
$("#text").hide(); 
}); 
$("#show").click(function() { 
<!--显示ID的为text的文本--> 
$("#text").show(); 
}); 
$("#toggle").click(function() { 
<!--在隐藏与显示之间切换ID的为text的文本--> 
$("#text").toggle(); 
}); 
}); 
</script> 

lt;!--这段控制默认是显示还是不显示 

<style type="text/css"> 
#text{ 
display:none 
} 
</style> 

-> 

<title>JQ淡出与显示</title> 

</head>

ログイン後にコピー