jQuary的相关动画效果
第一種：該方法隱藏所有?<p>?元素：
<html>
<head>
<script?type="text/javascript"?src="jquery.js"></script>
<script?type="text/javascript">
$(document).ready(function(){
??$("button").click(function(){
????$("p").hide();
??});
});
</script>
</head>
<body>
<h2>This?is?a?heading</h2>
<p>This?is?a?paragraph.</p>
<p>This?is?another?paragraph.</p>
<button>Click?me</button>
</body>
?
</html>
?
第二種：（如何隱藏部分文本。）
<!DOCTYPE?html>
<html>
<head>
<script?src="/jquery/jquery-1.11.1.min.js"></script>
<script?type="text/javascript">
$(document).ready(function(){
??$(".ex?.hide").click(function(){
????$(this).parents(".ex").hide("slow");
??});
});
</script>
<style?type="text/css">?
div.ex
{
?
padding:7px;
border:solid?1px?#c3c3c3;
}
</style>
</head>
?
<body>
?
<h3>中國辦事處</h3>
<div?class="ex">
<button?class="hide"?type="button">隱藏</button>
<p>聯系人：張先生<br?/>?
北三環中路?100?號<br?/>
北京</p>
</div>
?
<h3>美國辦事處</h3>
<div?class="ex">
<button?class="hide"?type="button">隱藏</button>
<p>聯系人：David<br?/>?
第五大街?200?號<br?/>
紐約</p>
</div>
</body>
</html>
?
第三種（hide()?和?show()?方法來隱藏和顯示?HTML?元素：）
<!DOCTYPE?html>
<html>
<head>
<script?src="/jquery/jquery-1.11.1.min.js"></script>
<script?type="text/javascript">
$(document).ready(function(){
??$("#hide").click(function(){
??$("p").hide();
??});
??$("#show").click(function(){
??$("p").show();
??});
});
</script>
</head>
<body>
<p?id="p1">如果點擊“隱藏”按鈕，我就會消失。</p>
<button?id="hide"?type="button">隱藏</button>
<button?id="show"?type="button">顯示</button>
</body>
</html>
第四種：（帶有?speed?參數的?hide()?方法：）
<!DOCTYPE?html>
<html>
<head>
<script?src="/jquery/jquery-1.11.1.min.js"></script>
<script?type="text/javascript">
$(document).ready(function(){
??$("button").click(function(){
??$("p").hide(1000);
??});
});
</script>
</head>
<body>
<button?type="button">隱藏</button>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
</body>
</html>
第五種：（使用?toggle()?方法來切換?hide()?和?show()?方法）
<!DOCTYPE?html>
<html>
<head>
<script?src="/jquery/jquery-1.11.1.min.js"></script>
<script?type="text/javascript">
$(document).ready(function(){
??$("button").click(function(){
??$("p").toggle();
??});
});
</script>
</head>
<body>
<button?type="button">切換</button>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
</body>
</html>
?第六種：（jQuery?fadeIn()?用于淡入已隱藏的元素，其中若想淡出則使用fadeOut（）方法，并且去掉div中的display:none）
<!DOCTYPE?html>
<html?lang="en">
<head>
?<meta?charset="UTF-8">
?<title>三張圖片的淡入效果</title>
?<script?src="jquery/jquery-1.11.1.min.js"></script>
?<script?type="text/javascript">
??$(document).ready(function(){
???$("button").click(function(){
????$("#aa").fadeIn();
????$("#bb").fadeIn("slow");
????$("#cc").fadeIn(4000);
???});
??});
?</script>
</head>
<body>
<p>點擊之后，三張圖片淡入</p>
<button>點擊這里，使三個矩形淡入</button>
<div?id="aa"?style="width:80px;height:80px;display:none;"></div>
<br>
<div?id="bb"?style="width:80px;height:80px;display:none;"></div>
<br>
<div?id="cc"?style="width:80px;height:80px;display:none;"></div>?
</body>
</html>
第七種（jQuery?fadeToggle()?方法可以在?fadeIn()?與?fadeOut()?方法之間進行切換。）
<!DOCTYPE?html>
<html?lang="en">
<head>
?<meta?charset="UTF-8">
?<title>Document</title>
?<script?src="jquery/jquery-1.11.1.min.js"></script>
?<script?type="text/javascript">
?$(document).ready(function(){
??$("button").click(function(){
???$("#aa").fadeToggle();
???$("#bb").fadeToggle("slow");
???$("#cc").fadeToggle(3000);
??});
?});
?</script>
</head>
<body>
<button>請點擊</button>
<div?id="aa"?style="width:80px;height:80px;"></div>
<br>
<div?id="bb"?style="width:80px;height:80px;"></div>
<br>
<div?id="cc"?style="width:80px;height:80px;"></div>?
</body>
</html>
第八種（jQuery?slideToggle()?方法可以在?slideDown()?與?slideUp()?方法之間進行切換。如果元素向下滑動，則?slideToggle()?可向上滑動它們。如果元素向上滑動，則?slideToggle()?可向下滑動它們。）
<!DOCTYPE?html>
<html?lang="en">
<head>
?<meta?charset="UTF-8">
?<title>Document</title>
?<script?src="jquery/jquery-1.11.1.min.js"></script>
?<script?type="text/javascript">
?$(document).ready(function(){
??$(".bb").click(function(){
???$(".aa").slideToggle("slow");
??});
?});
?</script>
?<style?type="text/css">
?div.aa,p.bb{
??margin:?0px;
??padding:?5px;
??text-align:?center;
??background:?#e5eecc;
??border:?solid?1px?#c3c3c3;
?}
?.aa{
??height:?150px;
??display:?none;
?}
?</style>
</head>
<body>
<div?class="aa">
?<p>啦啦啦啦啦</p>
?<p>哈哈哈哈哈</p>
</div>
<p?class="bb">請點擊這里</p>
</body>
</html>
第九種（圖片的動畫效果其中用到方法包括1、 $("div").animate({?left:'250px',opacity:'0.5',height:'150px',?width:'150px'?});2、$("div").animate({?left:'250px',?height:'+=150px',width:'+=150px'})3、$("div").animate({height:'toggle'});4、??var?div=$("div");div.animate({height:'300px',opacity:'0.4'},"slow");div.animate({width:'300px',opacity:'0.8'},"slow");div.animate({height:'100px',opacity:'0.4'},"slow");div.animate({width:'100px',opacity:'0.8'},"slow");5、?var?div=$("div");div.animate({left:'100px'},"slow");div.animate({fontSize:'3em'},"slow")；）
<!DOCTYPE?html>
<html?lang="en">
<head>
?<meta?charset="UTF-8">
?<title>圖片的動畫效果</title>
?<script?src="jquery/jquery-1.11.1.min.js"></script>
?<script?type="text/javascript">
?$(document).ready(function(){
??var?div?=?$("div");
???div.animate({left:'100px'},"slow");
?????????div.animate({fontSize:'5em'},"slow");
?????????$("button").click(function(){
??????????$("#aa").css("color","red").slideUp(2000).slideDown(2000);
?????????})
?});
?</script>
</head>
<body>
?<div?style="height:200px;width:200px;background:green;position:absolute;">HELLO</div>
?<p?id="aa">看我在不停的動！</p>
?<button>請點擊</button>
</body>
</html>
轉載于:https://www.cnblogs.com/lc93/p/7879079.html
總結
以上是生活随笔為你收集整理的jQuary的相关动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 罗马盘，大力盘，大圣盘等网盘资源搜索免费
- 下一篇： cad计算机编程,CAD/CAM自动编程