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

  • 相关阅读:
    [51nod1299]监狱逃离
    [51nod1206]Picture
    noi 2016 游记
    [Codeforces 696D] Legen...
    [bzoj2574] [Poi1999]Store-Keeper
    [bzoj1227] [SDOI2009]虔诚的墓主人
    [bzoj3979] [WF2012]infiltration
    Docker
    SpringBoot实现登录
    SpringBoot第一次案例
  • 原文地址:https://www.cnblogs.com/leezhxing/p/4060408.html
Copyright © 2011-2022 走看看