jQuery——类操作、show函数、滑动方法、事件切换、停止排队stop方法及自定义动画方法

jQuery可以通过.css(“属性名”(，“要修改的值”))操作css样式

括号里可以是键值对的形式，比如：

$("div").css({
    width:400px,
    height:200px,
    backgroundColor:"red"//如果是复合属性则要用驼峰命名法，如果值不是数字，需要加引号
})

 

然而在开发中更多使用的是类的操作：

1、添加类  addClass()

$("div").addClass("current")

2、删除类  removeClass()

$("div").removeClass("current")

3、切换类  toggleClass()

$("div").toggleClass("c")

 

jQuery类操作不影响原先类！！比如addClass()只相当于追加一个类，不会覆盖原先的类

show ( [ speed , [ easing ] , [ fn ] ] ) 

• 参数可以直接省略，动画直接显示
• speed：指定动画速度，可用："slow","normal","fast",或者动画时长的毫秒值，例：1000
• easing：用来指定切换效果，默认是"swing"，可用参数“linear”。
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次

hide方法，toggle方法和show方法的参数表一致

slideDown()方法：下滑动

slideUp()方法：上滑动

slideToggle()方法：滑动切换

一些菜单栏用这个，比show要更有美观性

事件切换  hover ( [ over , ] out )

over：鼠标移到元素上要触发的函数

out：鼠标移出元素要触发的函数

有些函数可以在hover中只写一个函数便可达到两个的效果，比如slideDown()和slideUp()可以只写成一个slideToggle()

$(".nav>li").hover(function(){
       $(this).children("ul").slideToggle();
})

 

停止排队：stop()

滑动动画一旦触发就会执行，那么如果多次触发，就会造成多个动画的效果排队执行，

这种情况叫做效果队列，显然这不是我们想看到的，所以就需要解决方法：stop()

stop()一定要写在动画的前面，比如：

$(".nav>li").hover(function(){
       $(this).children("ul").stop().slideToggle();
})

 

自定义动画animate

animate(params,[speed],[easing],[fn])

params:想要改变的样式属性，以对象形式传递

举个栗子：

$(function() {
    $("button").click(function() {
        $("div").animate({
            left: 500,
            top: 300,
            opacity: .4,
            width: 500
        }, 500);
    })
})