jQuery 动画
动画
$('button').click(function () {
// 显示
$('.box').stop().show(2000,function(){ 回调函数 })
$('.box').stop().hide(2000) // 隐藏
//使用动画效果 一定先stop()停止动画 再开动画
$('.box').stop().toggle(500); // 显示隐藏一起设置 500 为时间
//卷帘门效果 下开
$('.box').slideDown(300);
// 卷帘门 上关
$('.box').slideUp(1000);
// 卷帘门 一起设置
$('.box').slideToggle(1000);
// 淡出
$('.box').fadeIn(1000);
// 淡入
$('.box').fadeOut(1000);
// 淡出淡入
$('.box').fadeToggle(1000);
})
显示隐藏动画
show();
hide(3000,fn);
toggle(3000,fn)
卷帘门效果
slideDown(); //显示
slideUp();//隐藏
slideToggle() //开关式的显示隐藏
淡入淡出效果
fadeIn();//显示
fadeOut();//隐藏
fadeToggle()//开关式的显示隐藏
额外内容
click
css(); //样式属性操作 oDiv.style.xxx
text(); //innerText
html(); //innerHtml
val(); //value
addClass();
removeClass()
jQuery的自定义动画
$(selector).animate({css的属性},speed,fn)
-
要想修改背景颜色,那么要借助与jquery的插件 https://github.com/jquery/jquery-color/blob/master/jquery.color.js
$("button").click(function () {
let json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
let json2 = {
"width": 100,
"height": 100,
"left": 100,
"top": 100,
"border-radius": 100,
"background-color": "red"
};
//自定义动 画
$("div").animate(json, 1000, function () {
$("div").animate(json2, 1000, function () {
alert("动画执行完毕！");
});
});
})
停止动画
使用动画的时候一定要先stop() 再开启动画,使用定时器的时候 要先清定时器,再开定时器
//入口函数
$(document).ready(function () {
//需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
var jqli = $(".wrap>ul>li");
//绑定事件
jqli.mouseenter(function () {
$(this).children("ul").stop().slideDown(1000);
});
//绑定事件(移开隐藏)
jqli.mouseleave(function () {
$(this).children("ul").stop().slideUp(1000);
});
});
