版权声明:尊重原创! 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>