一、jQuery显示和隐藏动效
- 语法
$(selector).hide(speed,callback); // 隐藏
$(selector).show(speed,callback); // 显示
$(selector).toggle(speed,callback); // 切换
- speed 参数规定隐藏/显示的速度,可以取值为毫秒。
- 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
- 案例代码
$("button").eq(0).click(function(){
// $('div').css('display','block');
$('div').show(1000,function(){
alert('显示完成');
});
});
$("button").eq(1).click(function(){
// $('div').css('display','none');
$("div").hide(1000,function(){
alert('隐藏完成');
});
});
$("button").eq(2).click(function(){
$('div').toggle(1000,function(){
alert('切换完成');
});
});
- 效果展示
二、jQuery对联广告案例
-
scroll用于监听滚动事件
-
案例代码
// 1.监听网页的滚动 $(window).scroll(function(){ // 1.1获取网页滚动的偏移位 var offset = $('html,body').scrollTop(); // 1.2判断网页是否滚动到了指定位置 if(offset >= 500){ // 1.3显示广告 $('img').show(1000); }else{ // 1.4隐藏广告 $('img').hide(1000); } })
三、jQuery展开和收起动画
- 语法
.slideUp( time ,fn) // 收起
.slideDown( time ,fn ) // 展开
.slideToggle( time ,fn ) //切换
time : 展开/收起动画执行的时间,单位:毫秒。
fn :动画执行完成后的回调函数。
-
案例代码
$('button').eq(0).click(function(){ $('div').slideDown(1000,function(){ alert('展开完毕'); }); }); $('button').eq(1).click(function(){ $('div').slideUp(1000,function(){ alert('收起完毕'); }); }); $('button').eq(2).click(function(){ $('div').slideToggle(1000,function(){ alert('切换完毕'); }); });
3. 效果展示
![N4cZSP.gif](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zMS5heDF4LmNvbS8yMDIwLzA2LzMwL040Y1pTUC5naWY)
## 四、折叠菜单案例
1. 案例代码
```js
<script>
$(function(){
// 1.监听一级菜单的点击事件
$('.nav>li').click(function(){
// 1.1拿到二级菜单
var $sub = $(this).children(".sub");
// 1.2让二级菜单展开
$sub.slideDown(1000);
// 1.3拿到所有非当前的二级菜单
var otherSub = $(this).siblings().children('.sub');
// 1.4让所有非当前的二级菜单收起
otherSub.slideUp(1000);
// 1.5让背点击的一级菜单箭头旋转
$(this).addClass('current');
// 1.6让所有非被点击的一级菜单箭头还原
$(this).siblings().removeClass('current');
});
// 1.5让背点击的一级菜单箭头旋转
$(this).addClass('current');
// 1.6让所有非被点击的一级菜单箭头还原
$(this).siblings().removeClass('current');
});
</script>
五、jQuery淡入淡出动画效果
-
语法
.fadeIn(one,two); // 淡入 .fadeOut(one,two); // 淡出 .fadeToggle(one,two); // 切换 .fadeTo(one,three,two); // 淡入到某种程度
one :执行动画的时长
two :动画执行完毕后的回调函数
three :淡入透明度的程度
-
案例代码
$(function(){ $('button').eq(0).click(function(){ $('div').fadeIn(1000,function(){ alert('淡入完毕'); }); }); $('button').eq(1).click(function(){ $('div').fadeOut(1000,function(){ alert('淡入完毕'); }); }); $('button').eq(2).click(function(){ $('div').fadeToggle(1000,function(){ alert('淡入完毕'); }); }); $('button').eq(3).click(function(){ $('div').fadeTo(1000,0.3,function(){ alert('淡入完毕'); }); }); }); </script>
- 效果展示
六、自定义动画
-
语法
.animate(one,two,three,four)
第一个参数:接收一个对象,可以在对象中修改属性
第二个参数:指定动画时长
第三个参数:指定动画节奏,默认就是swing
第四个参数:动画执行完毕之后的回调函数
-
案例代码
$(function(){ $("button").eq(0).click(function(){ // $('.one').animate({ // width:500,height:200 // },1000,function(){ // alert('执行完毕'); // }); $('.one').animate({ marginLeft:500 },5000,function(){ // alert('执行完毕'); }); /* 第一个参数:接收一个对象,可以在对象中修改属性 第二个参数:指定动画时长 第三个参数:指定动画节奏,默认就是swing 第四个参数:动画执行完毕之后的回调函数 */ $('.two').animate({ marginLeft:500 },5000,"linear",function(){ // alert('执行完毕'); }); }); $("button").eq(1).click(function(){ $('.one').animate({ width:"+=100" },1000,function(){ // alert('加载完毕'); }); }); $("button").eq(2).click(function(){ $('.one').animate({ // width:"hide", width:"toggle" },1000,function(){ // alert('加载完毕'); }); }); }); </script>
- 效果展示
七、无限循环滚动
-
案例代码
$(function(){ // 0.定义变量保存偏移位 var offset = 0; // 1.让图片滚动起来 var timer; function autoPlay(){ timer = setInterval(function(){ offset += -10; if(offset<=-640){ offset = 0; } $('ul').css("marginLeft",offset); },100);} autoPlay(); $('li').hover(function(){ // 停止滚动 clearInterval(timer); // 给非当前选中添加蒙版 $(this).siblings().fadeTo(100,0.5); // 去除当前选中的蒙版 $(this).fadeTo(100,1) },function(){ // 继续滚动 autoPlay(); // 去除所有的蒙版 $('li').fadeTo(100,1); }); }); </script>
unction(){
// 继续滚动
autoPlay();
// 去除所有的蒙版
$(‘li’).fadeTo(100,1);
});
});
2. 效果展示
![NN6ubq.gif](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zMS5heDF4LmNvbS8yMDIwLzA2LzIzL05ONnVicS5naWY)