jQuery
内置动画
-
淡入淡出: 不断改变元素的透明度来实现的
- fadeIn(): 带动画的显示
- fadeOut(): 带动画隐藏
- fadeToggle(): 带动画切换显示/隐藏
/* 需求: 1. 点击btn1, 慢慢淡出 * 无参 * 有参 * 字符串参数 * 数字参数 */ var $div1=$('.div1'); $('#btn1').click(function () { $div1.fadeOut(1000); }); /* 2. 点击btn3, 慢慢淡入 */ $('#btn2').click(function () { $div1.fadeIn(1000); }); /* 3. 点击btn3, 淡出/淡入切换,动画结束时提示“动画结束了” */ $('#div3').click(function () { $div1.fadeToggle(); })
-
滑动动画
- slideDown(): 带动画的展开
- slideUp(): 带动画的收缩
- slideToggle(): 带动画的切换展开/收缩
/* 需求: 1. 点击btn1, 向上滑动 */ var $div1=$('.div1'); $('#btn1').click(function () { $div1.slideUp(3000); }); /* 2. 点击btn3, 向下滑动 */ $('#btn2').click(function () { $div1.slideDown(3000); }); /* 3. 点击btn3, 向上/向下切换 */ $('#btn3').click(function () { $div1.slideToggle(); });
-
显示隐藏,默认没有动画, 动画(opacity/height/width)
- show(): (不)带动画的显示
- hide(): (不)带动画的隐藏
- toggle(): (不)带动画的切换显示/隐藏
/* 需求: 1. 点击btn1, 立即显示 2. 点击btn2, 慢慢显示 3. 点击btn3, 慢慢隐藏 4. 点击btn4, 切换显示/隐藏 */ var $div1 = $('.div1') //1. 点击btn1, 立即显示 $('#btn1').click(function () { $div1.show() }) //2. 点击btn2, 慢慢显示 $('#btn2').click(function () { $div1.show(1000) }) //3. 点击btn3, 慢慢隐藏 $('#btn3').click(function () { $div1.hide(1000) }) //4. 点击btn4, 切换显示/隐藏 $('#btn4').click(function () { $div1.toggle(1000) })
-
jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的
-
animate(): 自定义动画效果的动画
/* 需求: 1.逐渐扩大 1.宽度扩大 2.宽度和高度扩大 3.先宽度扩大后高度扩大 */ var $div1=$('.div1'); $('#btn1').click(function () { // $div1.animate({ // width:200, // height:200 // },1000) $div1 .animate({ width:200 },1000) .animate({ height:200 },1000) }); /* 2.移动到指定位置 1.移动到(500,100)处 2.移动到(100,20)处 */ $('#btn2').click(function () { $div1.animate({ left: 500, top:100 },1000) }); /* 3.移动到指定的距离 */ $('#btn3').click(function () { $div1.animate({ left: '+=100', top: '-=50' },3000) });
-
stop(): 停止动画
$('#btn4').click(function () { $div.stop(); });
-
导航动态显示效果
<div id="navigation">
<ul>
<li><a href="#">首 页</a></li>
<li><a href="#">衬 衫</a>
<ul>
<li><a href="#">短袖衬衫</a></li>
<li><a href="#">长袖衬衫</a></li>
<li><a href="#">无袖衬衫</a></li>
</ul>
</li>
<li><a href="#">卫 衣</a>
<ul>
<li><a href="#">开襟卫衣</a></li>
<li><a href="#">套头卫衣</a></li>
</ul>
</li>
<li><a href="#">裤 子</a>
<ul>
<li><a href="#">休闲裤</a></li>
<li><a href="#">卡其裤</a></li>
<li><a href="#">牛仔裤</a></li>
<li><a href="#">短裤</a></li>
</ul>
</li>
<li><a href="#">联系我们</a></li>
</ul>
$('#navigation>ul>li:has(ul)').hover(function () {
//动画展开
$(this).children('ul').stop().slideDown();
},function () {
//动画收缩
$(this).children('ul').stop().slideUp();
});
多库共存
-
问题 : 如果有2个库都有
$
, 就存在冲突
解决 : jQuery库可以释放$
的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了
API : jQuery.noConflict() -
先定义一个myLib.js文件
(function () { window.$ = function () { console.log('my lib $()...') } })();
-
<script type="text/javascript" src="js/myLib.js"></script> <script type="text/javascript" src="js/jquery-1.10.1.js"></script> <script type="text/javascript"> //释放$的使用权 jQuery.noConflict(); //调用myLib中的$ $(); //想要使用jQuery的功能,只能使用jQuery jQuery(function () { console.log('文档加载完毕'); }); console.log('++++');//这个先执行 </script>
区别onload与ready
区别: window.onload与 $(document).ready()
- window.onload
- 包括页面的图片加载完后才会回调(晚)
- 只能有一个监听回调
- $(document).ready()
- 等同于: $(function(){})
- 页面加载完就回调(早)
- 可以有多个监听回调
<img id="logo" src="https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2017-05-19/6fec71d56242b74eb24b4ac80b817eac.png">
通过输出图片的宽度来测试快慢
/*
需求:
1. 直接打印img的宽度,观察其值
*/
console.log('直接',$('#logo').width());
/*
2. 在 $(function(){}) 中 打印 img 的宽度
*/
$(function () {
console.log('ready1',$('#logo').width())
});
$(function () {
console.log('ready2',$('#logo').width())
});
/*
3. 在 window.onload 中打印宽度
*/
window.onload=function(){
console.log('onload1',$('#logo').width());
};
window.onload=function(){
console.log('onload2',$('#logo').width());
};
/*
4. 在 img 加载完成后打印宽度
*/
$('#logo').on('load',function () {
console.log('img load',$(this).width())
})