版权声明：尊重原创！ https://blog.csdn.net/weixin_42675488/article/details/88746300
| 参考文献： | |
|---|---|
| —— jquery 在线手册 |
animate({},1000,‘linear’,function() {} );
- 第一个参数：接受一个对象，可以在对象中修改属性；
- 第二个参数：指定动画的时长；
- 第三个参数：指定动画节奏，默认是swing；
- 第四个参数：动画执行完毕之后的回调函数；
<script>
$(function() {
// 1.0、遍历所有的 li 标签, index - 遍历它的索引， ele- 遍历它的元素
$('ul>li').each(function(index,ele) {
// 1.1、对 span标签 生成新的图片位置
var $url = "url(\'image/bg.png') no-repeat 0" +(index * -24)+"px"
// 1.2、设置新的图片位置，传值 background 等于 url
$(this).children('span').css('background',$url);
});
// 2.0、监听li的移入事件
$('ul>li').mouseenter(function() {
// 2.1、将图标往上移位置
$(this).children('span').animate({
top: -50
},1000,function() {
// 2.2、将图标往下移位置
$(this).css('top','50px');
// 2.3、将图片的位置复原
$(this).animate({
top: 0
},1000);
})
})
})
</script>
<ul>
<li>
<span></span>
百度
</li>
</ul>
tab切换：
<script>
$(function() {
//登录注册选项切换
$('#info_tab span').click(function() {
var index = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$('#info_content .info-form').eq(index).show().siblings().hide();
})
})
</script>
折叠菜单：
| 具体方法： | |
|---|---|
| 1.0、.children(’.sub’)： | children实时获取子元素 |
| 2.0、.slideDown()： | 通过使用滑动效果，显示隐藏的被选元素 |
| 3.0、.slideUp()： | 通过使用滑动效果，如果元素已显示出来的话，隐藏被选元素 |
| 4.0、.appendChild(Node)： | 一般是在指定元素节点的最后一个子节点之后添加节点 |
| —— | |
| $(“给定元素”).siblings()： | 其作用是筛选给定的同胞同类元素（不包括给定元素本身） siblings()+eq() 用法与实例 |
- 注释：.slideDown()该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）
- function(){} - 回调函数
<script>
$(function() {
// 1.0 监听一级菜单的点击事件
$('.nav>li').click(function() {
// 1.1 拿到二级菜单 , this 谁触发,谁就是 this
var $sub = $(this).children('.sub');
// 1.2 让当前二级菜单展开
$sub.slideDown(1000);
// 1.3 拿到所有非当前二级菜单，
//第一步 $(this).siblings() - 拿到所有非当前的一级菜单，然后再拿到所有非当前一级菜单的二级菜单
$(this).siblings().children('.sub');
// 1.4 让所有非当前二级菜单收起
$sub.slideUp(1000);
// 1.5 让被点击的一级菜单下的 span标签 旋转
$(this).addClass('current');
// 1.6 让所有非被点击的一级菜单箭头还原
$(this).siblings().removeClass('current');
})
})
</script>
<ul class="nav">
<li>一级菜单 <span></span>
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
分析：
- 同样是一开始就获取了ul的子列表，但是通过 .querySelectorAll() 获取的子列表，在创建列表前和创建列表后，长度都为0；
- 而通过 .children() 方法获取的字列表，在列表创建前，长度为0，而创建之后，长度为10；
- why？
- 1.0、使用 .children() 获取的是元素对象是一个实时更新的列表 ，可以看做一个数组对象；
- 2.0、而使用 .querySelectorAll() 获取的是NodeList 与其他方式获取的NodeList不同，
它不是节点集合 ，而是元素集合， 并且是静态的 ，不会实时更新， 相当于克隆了一个新数组；
所以，我们在使用的时候要注意了哦，如果想要实时获取列表的变化，可以使用.children()，反之，则使用.querySelectorAll（当然也包括getElementsByClassName和getElementsByTagNama）
<div id="wrap">
<ul id="list"></ul>
</div>
<script>
var oList = document.querySelector('#list');
var lis1 = oList.querySelectorAll('li');
var lis2 = oList.children;
console.log(lis1.length);//0
console.log(lis2.length);//0
function createLi(){
for(var i=0; i<10; i++){
// 向 ul 中循环添加 li 标签
var li = document.createElement('li');
li.innerHTML = i;
oList.appendChild(li);
}
}
createLi();
console.log(lis1.length);//0
console.log(lis2.length);//10
</script>
下拉菜单
在jquery中如果需要进行动画，建议在执行动画前先调用stop方法，然后再执行动画；
<script>
// 1.0 监听鼠标移入事件
$('.nav>li').mouseenter(function() {
// 1.1 拿到二级菜单
$sub = $(this).children('.sub');
// 停止当前正在运行的动画: ( 防止动画队列 )
$sub.stop();
// 1.2 让二级菜单展开
$sub.slideDown(1000);
})
// 2.0 监听鼠标移出事件
$('.nav>li').mouseleave(function() {
// 2.1 拿到二级菜单
$sub = $(this).children('.sub');
// 停止当前正在运行的动画: ( 防止动画队列 )
$sub.stop();
// 2.2 让二级菜单收起
$sub.slideUp(1000);
})
</script>
<ul class="nav">
<li>一级菜单 <span></span>
<ul class="sub">
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
弹出广告
<script>
$(function() {
// 1.0 监听 span 的点击事件
$('span').click(function() {
$('#div').remove();
});
// 2.0 执行广告动画 ： 展开 - 消失 - 显示
$('#div').slideDown(1000, function() {
$('#div').fadeOut(1000, function() {
$('#div').fadeIn(1000);
})
})
// 2.0 简写：stop() - 防止各个动画之间队列
$('#div').stop().sildeDown(1000).fadeOut(1000).fadeIn(1000);
})
</script>
<div id="div">
<img src="" alt="" />
/* 模拟关闭按钮 */
<span></span>
</div>
