jQuery效果
自定义动画效果animate
animate([params,[speed],[easing],[fn])
(1)params:想要更改的样式属性,以对象形式传递,必须写,属性名可以不带引号,如果是复合属性则需要采取驼峰命名法 borderLeft ,其余参数都可以省略
(2)speed:三种预定速度之一的字符串(“slow”、“normal"、“fast”)或表示动画时长的毫秒数值(如:1000)
(3)easing:用于指定切换效果,默认是"swing",可用参数"linear"
(4)fn : 回调函数,再动画完成时执行的函数,每元素执行一次
$(function() {
$("button").click(function() {
$("div").animate({
left: 200,
top: 500,
opacity: 0.4,
width: 500,
}, 500)
})
})
王者荣耀手风琴效果案例(折叠卡片)
鼠标经过某个小li 有两步操作:
1.当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入
2.其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出
<style>
* {
margin: 0;
padding: 0;
}
img {
display: block;
}
ul {
list-style: none;
}
.hero-box {
width: 852px;
margin: 100px auto;
background-color: rgba(84, 28, 224, 0.5);
overflow: hidden;
padding: 10px;