Jquery(5)动画效果

最新推荐文章于 2024-11-04 16:17:23 发布

sugarYTian

最新推荐文章于 2024-11-04 16:17:23 发布

阅读量387

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/sugarYTian/article/details/121398507

版权

本文详细介绍了Jquery中的几种动画效果，包括show/hide带时间的切换、fadeIn/fadeOut的淡入淡出、slideUp/slideDown的滑动以及animate的自定义动画。通过示例代码展示了如何实现这些效果，包括交替展示隐藏、淡入淡出、滑入滑出、自定义动画路径等。此外，还探讨了CSS动画的未排队和排队执行的区别。

摘要由CSDN通过智能技术生成

1.show和hide带时间

//文档就绪函数
   $(function(){
       //点击交替展示隐藏（加时间）
       $("h5").toggle(function(){
           $(".content").hide(3000);
       },function(){
           $(".content").show(3000);
       })
   })

2.fade 淡入淡出

//文档就绪函数
   $(function(){
   //点击交替淡入淡出的效果
       $("h5").toggle(function(){
           $(".content").fadeOut(2000);
       },function(){
           $(".content").fadeIn(2000);
       })
   })

3.slide 滑入滑出

//文档就绪函数
           $(function(){
   //点击交替滑入滑出效果
               $("h5").toggle(function(){
                   $(".content").slideUp(2000);
               },function(){