jQuery效果及动画

最新推荐文章于 2022-12-13 13:43:21 发布

ざ宸梓灏

最新推荐文章于 2022-12-13 13:43:21 发布

阅读量51

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_56709347/article/details/116672090

版权

效果

显示（show）和隐藏（hide）

show
hide
toggle

<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<body>
<div id="div1"></div>
<input type="button" id="btnhide" value="点击我隐藏掉" />
<input type="button" id="btnshow" value="点击我显示出来" />
<input type="button" id="toggle" value="开关" />
</body>

<script type="text/javascript">
$("#btnhide").click(function() {
$("#div1").hide(6000);
});
$("#btnshow").click(function() {
$("#div1").show(4000);
});
$("#toggle").click(function() {
$("#div1").toggle("fast"); 
//开关 slow 也可以直接写数字
});
</script>

淡入（fadeIn）和淡出（fadeOut）

fadeIn（显示）
fadeOut（隐藏)
fadeTo （进入）

<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<body>
<div id="div1">·</div>
<input type="button" id="btnFadeIn" value="淡入" />
<input type="button" id="btnFadeOut" value="淡出" />
<p id="btnToggle">淡入淡出</p>
<p id="btnDadeTo">固定透明度</p>
</body>

<script type="text/javascript">
$("#btnFadeIn").click(function() {
$("#div1").fadeIn(1000);
})
$("#btnFadeOut").click(function() {
$("#div1").fadeOut(1000);
})
$("#btnToggle").click(function() {
$(“#div1”).fadeToggle(2000); //开关
})
$("#btnDadeTo").click(function() {
$("#div1").fadeTo(2000, 0.3);
})
//fadeTo固定的透明度，达到那个值就停止变化
</script>

上卷（slideUp）和下拉（slideDown）

slideUp
slideDown
slideToggle

<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<body>
<div id="div1"></div>
<p id="btnSlideUp">点击我上卷</p>
<p id="btnSlideDown">点击我下拉</p>
<p id="btnSlideToggle">开关</p>
</body>

<script type="text/javascript">
$("#btnSlideUp").click(function() {
$("#div1").slideUp(2000, function() {
});
});
$("#btnSlideDown").click(function() {
$("#div1").slideDown(2000);
});
$("#btnSlideToggle").click(function() {
$("#div1").slideToggle(2000);
});

动画

animate()中有三个参数
第一个参数是要改变你的样式 opacity：不透明度
第二个参数是显示的速度（“fast”,“slow”,毫秒数）
第三个是回调函数。
animate({height:‘300px’,opacity:‘0.4’},‘slow’,function(){alert(“OK”)});