jquery |
您所在的位置：网站首页 › ps动画效果有哪些 › jquery |
|
jquery-12 jquery常用动画效果有哪些
一、总结
一句话总结：jquery可以用户animate()自定义动画，也可以slide和fade系列方法来设置动画。
1、动画效果如何设置执行时间？ 在方法里面带上时间参数即可，所有的都是这样 25 $(this).next().fadeOut(1000); 5 $(this).next().slideUp(1000);2、滑上滑下的一组效果怎么写（三个常用方法）？ 关键词为slide，slideDown(); slideUp();slideToggle(); 2 $('h1').click(function(){ 3 d=$(this).next().css('display'); 4 if(d=='block'){ 5 $(this).next().slideUp(1000); 6 }else{ 7 $(this).next().slideDown(1000); 8 } 9 });3、如何根据css属性来判断元素的操作？ 用css()拿出属性值，然后判断，比如判断显隐就可以用下面方法 22 d=$(this).next().css('display'); 23 24 if(d=='block'){4、淡入淡出动画的一组操作有哪些（三个方法）？ fadeIn();fadeOut();fadeTo(); 21 $('h1').click(function(){ 22 d=$(this).next().css('display'); 23 24 if(d=='block'){ 25 $(this).next().fadeOut(1000); 26 }else{ 27 $(this).next().fadeIn(1000); 28 } 29 });
二、jquery常用动画效果有哪些 1、相关知识 1.基本show(time);hide(time);toggle(time); 2.滑动slideDown();slideUp();slideToggle(); 3.淡入淡出fadeIn();fadeOut();fadeTo(); 2、代码 fadeIn和fadeOut淡入淡出 1 doctype html> 2 3 4 5 index 6 7 *{ 8 font-family: 微软雅黑; 9 } 10 11 12 13 14 linux 15 linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much! 16 17 linux 18 linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much! 19 20 21 $('h1').click(function(){ 22 d=$(this).next().css('display'); 23 24 if(d=='block'){ 25 $(this).next().fadeOut(1000); 26 }else{ 27 $(this).next().fadeIn(1000); 28 } 29 }); 30 31 fadeTo改变透明度 1 2 $('h1').click(function(){ 3 d=$(this).next().css('opacity'); 4 5 if(d=='1'){ 6 $(this).next().fadeTo(1000,0.5); 7 }else{ 8 $(this).next().fadeTo(1000,1); 9 } 10 }); 11 slideToggle切换滑上滑下 1 2 $('h1').click(function(){ 3 $(this).next().slideToggle(); 4 }); 5 slideDown滑下slideUp滑上 1 2 $('h1').click(function(){ 3 d=$(this).next().css('display'); 4 if(d=='block'){ 5 $(this).next().slideUp(1000); 6 }else{ 7 $(this).next().slideDown(1000); 8 } 9 }); 10
|
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |