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等)

  • 相关阅读:
    PHP开发经常遇到的几个错误
    PHP的Trait
    PHP反射API
    php split 和 explode 的区别
    php判断检测一个数组里有没有重复的值
    PHP serialize 和 JSON 解析与区别
    php 单文件上传
    php 数组 类对象 值传递 引用传递 区别
    六. 网络编程(解决黏包TCP)
    五. 网络编程(UDP 不黏包)
  • 原文地址:https://www.cnblogs.com/leezhxing/p/4060408.html
Copyright © 2011-2022 走看看