【Web前端】【jquery】jquery进阶：动画、事件、节点操作、数据串联、JQ工具、插件

animate 动画

animate() 动画

• 默认的运动形式是 慢快慢（swing），另外一种是匀速。
  匀速 “linear”
  慢快慢 “swing”

 $("#div1").hover(function(){
     $("#div2").animate({
         width: 300,
         height: 300,
         opacity: 0.5
     }, 4000, function(){
         $("#div1").html("移入");
     })
 }, function(){
  $("#div2").animate({
         width: 200,
         height: 200,
         opacity: 1
     }, 4000, function(){
         $("#div1").html("移出");
     })
 })

• 拓展更多animate的运动形式：
  引入 jquery-ui查找动画特效
• 有了JQueryUI以后 addClass和removeClass就变成了增强版的方法

$("button").eq(0).click(function(){
    $("#div1").addClass("box", 4000);
})
$("button").eq(1).click(function(){
    $("#div1").removeClass("box", 4000);
})
$( "#datepicker" ).datepicker();
$( "#tabs" ).tabs();

【小技巧】我们可以在每次调用animate之前先去调用一次stop关闭上一次定时器——>保证当前动画能马上触发，会攒着动画下次触发继续执行。

$(this).stop(true).animate({
          width: 300,
          height: 300
      }, 2000)
  }, function(){
      $(this).stop(true).animate({
          width: 100,
          height: 100
      }, 2000)
  }) 

延迟与停止动画：delay() 、stop()、finish()

• stop() 停止动画
  • 无参数：停止第一个动画
  • 一个参数true：停止所有动画
  • 两个参数true：停止所有动画，当前正在进行的动画，直接到达目的值
• finish() 停止所有动画,并且将所有的动画都到达目的值

$("#div2").click(function(){
  // $("#div1").stop(); //停止第一个动画，当时后续动画正常运动
        // $("#div1").stop(true); //停止所有动画
        // $("#div1").stop(true, true); //停止所有动画，并且使当前正在进行的动画，直接到达目的值
        $("#div1").finish(); //停止所有动画,并且将所有的动画都到达目的值
    })

• delay() 延迟

delay(4000)

$("#div1").animate({width: 300}, 2000).delay(4000).animate({height: 300}, 2000);

remove() detach() 删除元素节点

• remove() 删除元素节点
  【注】并不会保留这个元素节点上之前的事件和行为

• detach() 删除元素节点
  【注】会保留这个元素节点上之前的事件和行为

• 返回值就是我们删除这个节点

$(function(){
    $("#div1").hover(function(){
        $(this).css("backgroundColor", 'orange');
    }, function(){
        $(this).css("backgroundColor", 'blue');
    })

   $("button").click(function(){

    //remove 返回值就是我们删除这个节点
    //    var node = $("#div1").remove();
       var node = $("#div1").detach();
       node.appendTo($("#div2"));
   })
})