jq中三组动画和自定义动画

最新推荐文章于 2022-04-02 21:42:46 发布

Alex十年

最新推荐文章于 2022-04-02 21:42:46 发布

阅读量426

点赞数

分类专栏： jQuery知识总结

本文链接：https://blog.csdn.net/ilikejj0/article/details/79649965

版权

jQuery知识总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

相同点是，如果不传参数就没有动画效果
1、显示隐藏show(),hide()传进去的值代表动画持续的时间。也可以是字符串，可以是slow==200ms norma==400ms fast==600ms还可以传进去两个参数，第一个是持续时间，第二个是一个函数，类似js链式运动框架里的函数，执行完动画后执行。
2、滑入滑出slideDown()slideUp()如果不传参数，默认是normal。其他与显示隐藏相同，并且也有类似链式运动。
切换slideToggle()当你是滑入状态时，会执行滑出，如果是滑出状态，会执行滑入，相当于自己进行了判断。
3、淡入淡出fadeIn() fadeOut() fadeToggle(),与滑入滑出相同
4、自定义动画animate()其中有四个参数。第一个：对象，动画需要执行的样式，这个是必填的，如animate({left:800}),就是向右移动800px. 第二个：speed动画执行的时间。第三个：动画执行的样式，有swing(秋千)和linear(线性匀速),默认是swing。第四个：回调函数
5、为了防止快速移动或者点击出现bug，因为动画执行需要一段时间，jq是执行一个动画队列，当你快速移动时，由于时间的问题，当你鼠标不移动，动画还是会执行，此时就需要在动画前面加入一个stop()方法,一定是动画前面,对于第一次滑入执行，因为之前没有动画，所以不执行stop()，然后开始执行滑入动画，此时鼠标快速离开，对于滑出动画，就会执行stop(),即滑入动画没有执行完就被结束，然后执行滑出动画。stop()就是判断在这个动画之前，你有没有其他的动画，有就给你停止，没有就不执行stop()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
      width: 1300px;
    }

    #box {
      width: 1200px;
      height: 400px;
      border: 2px solid red;
      margin: 100px auto;
    }

    #box li {
      width: 240px;
      height: 400px;
      /*border: 1px solid #000;*/
      float: left;
    }

  </style>
</head>
<body>
<div id="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script>
    $(function(){
    var $li = $('#box li');
    //对页面初始化
    for(var i=0;i<$li.length;i++){
        $li.eq(i).css('backgroundImage','url(images/'+(i+1)+'.jpg)');
    }
    //给li加鼠标移入事件
    $li.mouseenter(function(){
        $(this).stop().animate({width:800}).siblings().stop().animate({width:100});
    }).mouseleave(function(){
        $li.stop().animate({width:240})
    });
 });    
</script>
</body>
</html>

Alex十年

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jq中三组动画和自定义动画

相同点是，如果不传参数就没有动画效果 1、显示隐藏show(),hide()传进去的值代表动画持续的时间。也可以是字符串，可以是slow==200ms norma==400ms fast==600ms还可以传进去两个参数，第一个是持续时间，第二个是一个函数，类似js链式运动框架里的函数，执行完动画后执行。 2、滑入滑出slideDown()slideUp()如果不传参数，默认是normal。其...
复制链接

扫一扫