JQ css操作 动画

jQuery css() 方法

返回 CSS 属性:

dom节点.css(' 想获取的样式名称 ')

改方法返回回来的值 带有单位

注：样式名称不能为空，为空时报错

// css
.one{
    background-color: aquamarine;
    font-size: 20px;
}
// html
<li class="one">1</li>
// js
$('li').click(function(){
    console.log($(this).css('font-size')); // 20px
})

设置 CSS 属性

dom节点.css(' 想获取的样式名称 '，‘ 想设置的值 ’)

和返回值一样设置值时必须带有单位

$('li').click(function(){
    $(this).css('font-size','50px')
})

点击前

点击后 

 

 

设置多个 CSS 属性

dom节点.css({ ' 想获取的样式名称 '：‘ 想设置的值 ’，' 想获取的样式名称 '：‘ 想设置的值 ’,... })

只需要将样式使用 {} 括起来，改成 key: value 的形式 即可

$('li').click(function(){
    $(this).css({'font-size':'50px','background-color':'red'})
})

jQuery css 类

addClass()

向被选元素添加一个或多个类

addClass() 的参数是 一个字符串 ，多个类名 使用 '空格' 隔开，不需要加前缀 '点' 

注 如果样式有冲突的话，按照 参数中最后一个类 的样式为准；

比如下面的例子 同时设置 两个样式的话，li 的 fontsize 是 blue 中的 30px

// css
.big{
    font-size: 50px;
}
.blue{
    font-size: 30px;
    background-color: blue;
}
// js
$('li').click(function(){
    // $(this).addClass('big')
    $(this).addClass('big blue')
})

removeClass()

从被选元素删除一个或多个类

removeClass()  的参数也是一个字符串 ，多个类名 使用 '空格' 隔开，不需要加前缀 '点' 

$('li').click(function(){
    $(this).removeClass('big')
    // $(this).removeClass('big blue')
})

toggleClass()

对被选元素进行添加/删除类的切换操作； 有则删除 无则添加

toggleClass()  的参数也是一个字符串 ，多个类名 使用 '空格' 隔开，不需要加前缀 '点' 

$('li').click(function(){
    $(this).toggleClass('big')
    // $(this).toggleClass('big blue')
})

jQuery动画

显示 隐藏

可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。使用 toggle() 方法来切换显示隐藏

三个方法 都接收 2个参数 第一个参数 是动画的时间 单位是毫秒

第二个参数 是回调函数 在 动画完成后调用

这个方式是通过 设置元素的 display 属性为 none 来控制元素的 

// html
<button id="btn">点击</button>
<div id="one" class="one">1</div>
// js
$('#btn').click(function(){
    // $('#one').hide()
    // $('#one').show()
    $('#one').toggle(1000,function(){
        console.log('完成了');
    })
})

淡入 淡出

fadeIn() 用于淡入已隐藏的元素， fadeOut() 方法用于淡出可见元素。fadeToggle() 方法可以在 淡入淡出 之间进行切换。

$('#btn').click(function(){
    // $('#one').fadeIn()
    // $('#one').fadeOut()
    $('#one').fadeToggle(1000,function(){
        console.log('完成了');
    })
})

fadeTo 和上面的三个方法相比多了个参数，分别是 （持续时间，不透明度，回调函数）

不透明度值介于 0 与 1 之间

$('#one').fadeTo(1000,0.5)

滑动

 slideDown() 方法用于向下滑动元素， slideUp() 方法用于向上滑动元素。 slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

$('#btn').click(function(){
    // $('#one').slideDown()
    // $('#one').slideUp()
    $('#one').slideToggle(1000,function(){
        console.log('完成了');
    })
})

自定义动画

animate() 方法用于创建自定义动画。也是三个参数，需要动画修改的样式，规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。

方法中第一个参数是一个对象 多个 样式使用 ‘逗号分割’，

值可以使用 += 等相对于原先值的赋值 或 设置属性为动画值设置为 "show"、"hide" 或 "toggle"

当我们定义多个动画时，将自动使用队列，按从上到下的顺序自动执行

注 不能修改颜色 如果需要的话您需要从 jquery.com 下载 Color Animations 插件。

$('#one').animate({
    height:'+=200px', 
    fontSize: '50px',
    color: 'red',
    backgroundColor: 'red'
},2000)

// 队列
$('#stop').click(function(){
    $('#one').animate({...})
    $('#one').animate({...})
    $('#one').animate({...})
})

停止动画

stop() 方法用于停止动画或效果，在它们完成之前，适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

$('#btn').click(function(){
    $('#one').slideToggle(3000,function(){
        console.log('完成了');
    })
})
$('#stop').click(function(){
    $('#one').stop()
})

可选的 第一个参数 规定是否清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 第二个参数 规定是否立即完成当前动画。默认是 false。