<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>动画</title> </head> <body> <h1>动画</h1> <hr> <button class="b1">隐藏</button> <button class="b2">显示</button> <button class="b3">显隐</button> <button class="b4">slide显隐</button> <button class="b5">fade显隐</button> <div class="box"></div> </body> <script src="js/jquery-3.3.1.js"></script> <script> $('.b1').on('click',function() { $('.box').hide() }) $('.b2').on('click',function() { $('.box').show() }) $('.b3').on('click', function () { $('.box').toggle() }) $('.b4').on('click', function () { $('.box').slideToggle() }) $('.b5').on('click', function () { $('.box').fadeToggle(1000, "linear", function () { console.log("动画完成"); }) // 参数: 时间, 运动曲线, 动画结束后的回调函数 }) </script> </html>注意:轮播图的左右滑动
//为input添加点击事件 $('input').click(function() { //为ul添加动画函数{函数体},动画执行的时间 $('ul').animate({ //与定位一起使用,距左边的宽度:获取点击体的索引和宽度,相乘 left: -$(this).index() * $(this).width() },300) })
626
08-13
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
