zoukankan      html  css  js  c++  java
  • 锋利的jQuery-4--animate()的用法

    1.一般动画:

    $("btn").click(function(){
        $("div").animate({"left" : "+=300px"}, 300);  //需要div设置了元素的position属性,否则不管用
    });

    2.多重动画:

    元素在向右滑动的同时,放大元素的高度。

    $("btn").click(function(){
        $("div").animate({"left" : "300px", "height" : "200px"}, 300);  //需要div设置了元素的position属性,否则不管用
    });

    元素向右滑动之后,再放大元素的高度。(像这样动画执行效果具有先后顺序,称之为动画队列)

    $("btn").click(function(){
        $("div").animate({"left" : "300px"}, 300)
       .animate({"height" : "200px"}, 300); //需要div设置了元素的position属性,否则不管用 });

    3.综合动画:

    元素先向右移动同时增大高度并且透明度从50%到100%,然后向下移动同时增大宽度,最后淡出隐藏。

    $("btn").click(function(){
        $("div").css("opacity", "0.5");
        $("div").animate({"left" : "300px", "height":"200px", "opacity" : "1" }, 300)
       .animate({"top" : "200px", "width" : "200px"}, 300)
       .fadeOut("slow"); //需要div设置了元素的position属性,否则不管用 });

    注意:如果动画执行完后不是fadeOut(),而是要改css样式,例如:.css({"border" : "5px solid blue"}),并不能得到预期的效果,因为css在动画开始执行的时候,css方法就被执行了。需要使用回调函数:

    $("btn").click(function(){
        $("div").css("opacity", "0.5");
        $("div").animate({"left" : "300px", "height":"200px", "opacity" : "1" }, 300)
       .animate({"top" : "200px", "width" : "200px"}, 300, function(){
          $(this).css("border" : "5px solid blue");
       });  //需要div设置了元素的position属性,否则不管用
    });

    callback回调函数适用于所有jQuery动画效果方法(show,slideDown等)

  • 相关阅读:
    docker 容器使用 systemctl 命令报错
    lxml 这个包和openpyxl 起冲突
    解决GPG error: The following signatures couldn't be verified because the public key is not available
    pyinstaller bug
    PyCharm使用技巧及常用快捷键
    python 软件目录规范
    Wpf canvas 绘图 像素对齐
    wpf ListView 隔行 (各行) 显示 不同 背景 颜色
    C# wpf 获取 数字 类型 所占字节数
    Mybatis-Plus QueryWrapper +sql自定义查询
  • 原文地址:https://www.cnblogs.com/leezhxing/p/4060408.html
Copyright © 2011-2022 走看看