JQuery2

JQuery

效果

划入划出：

滑入

$("#flip").click(function(){
  $("#panel").slideDown();
});

slideDown 有两个参数
参数1 动画时间长 可以填毫秒数 也可以填代表时间的字符串"slow" “normal” “fast”
参数二 动画执行完毕之后 他的回调函数

滑出

$("#flip").click(function(){
  $("#panel").slideUp();
});

slideUp 有两个参数
参数1 动画时间长 可以填毫秒数 也可以填代表时间的字符串"slow" “normal” “fast”
参数二 动画执行完毕之后 他的回调函数

切换

$("#flip").click(function(){
  $("#panel").slideToggle();
});

slideToggle 有两个参数
参数1 动画时间长 可以填毫秒数 也可以填代表时间的字符串"slow" “normal” “fast”
参数二 动画执行完毕之后 他的回调函数

淡入淡出

淡入

$(function(){
  
  $("#fadeIn").click(function(){
      $(".one").fadeIn(1000,function(){
	alert("风花雪月")
       });
   })

淡出

   $("#fadeOut").click(function(){
       $(".one").fadeOut(1000,function(){
	 alert("花前月下")
   });
 })

切换

$("#fadeToggle").click(function(){
       $(".one").fadeToggle(1000,function(){
	 alert("风和日丽")
     });
 })

淡入到哪里 第二个参数表示淡入目标透明度

$("#fadeTo").click(function(){
$(".one").fadeTo(1000,0.5)
});
})

show()方法

有两个参数 可以填毫秒数 也可以填代表时间的字符串"slow" “normal” “fast”
参数二 动画执行完毕之后 他的回调函数
如果show方法不参加任何参数 就表示没有有动画

animate方法 有四个参数

== 参数1 是必填项 为一个对象 里面填的是需要用来做动画的属性==
参数2 可选项 动画时长 400
参数3 可选项 运动曲线 匀速 linear 缓动 swing（默认值）
参数4 可选项 动画执行完毕的回调函数

 $("#move800").click(function () {
        自定义动画
        $("#box").animate({
          left: 800,
          height: 300,
          width: 300,
          opacity: 05
        }, 3000, "linear", function () {
          alert("end");
        })
      })

操作类

1.添加类

 $("#add").click(function(){
	 $(".box").addClass("font30 w300 h300 bgc");
})

设置单个类 $(".box").addClass("bgc");
【注】 一次性添加多个类 添加多个类 把全部的类放在一个字符串里 用空格隔开 如果不加空格 默认一个类
和classList添加类的区别:classList添加多个类传参 用双引号包括起来 每个类之间用逗号隔开

2.移除类

 $("#remove").click(function(){ 
$(".box").removeClass();
})

【注】 参数什么都不传 那么就表示移除全部的的类 包括原本设置默认的样式
和classList添加类的区别:classList添加多个类传参 用双引号包括起来 每个类之间用逗号隔开

3.判断类

 $("#has").click(function(){
 console.log($(".box").hasClass("bgc"));
 })

判断元素是否拥有某个类 如果有就返回true 否则false

4.切换类

 $("#toggle").click(function(){ 
 $(".box").toggleClass("font30");
})

判断元素是否拥有某个类 如果有就返回true 否则false