jQuery效果

重点:
在做效果的时候难免会出现动画排队的现象,比如其他鼠标事件或者鼠标点击事件过快,效果来不及运行,就会出现排队显现,所以,我们要在做的动画的前面添加一个stop()方法,这样就不会出现排队情况
例如
这个是下拉菜单的案例

  <ul class="nav">
        <li>
            <a href="">手机</a>
            <ul>
                <li><a href="">华为</a></li>
                <li><a href="">iPhone</a></li>
                <li><a href="">oppo</a></li>
            </ul>
        </li>
        <li>
            <a href="">电脑</a>
            <ul>
                <li><a href="">苹果</a></li>
                <li><a href="">外星人</a></li>
                <li><a href="">华硕</a></li>
            </ul>
        </li>
        <li>
            <a href="">电视</a>
            <ul>
                <li><a href="">长虹</a></li>
                <li><a href="">康佳</a></li>
                <li><a href="">联想</a></li>
            </ul>
        </li>
    </ul>
 <script>
 $(function() {
            console.log($('.nav>li'));
            $('.nav>li').mouseover(function() {
                $(this).children('ul').stop().slideDown()
            })
            $('.nav>li').mouseout(function() {
                $(this).children('ul').stop().slideUp()
            })
        })
</script>

这样在我滑上,滑下的时候不管我鼠标滑入滑出多块,都只会执行一次这个滑动效果

显示隐藏

三个方法

show()		显示	
hide()		隐藏
toggle()	显示与隐藏相互切换

接受三个参数,如果不写就直接显示隐藏
(speed(速度), easing(指定切换效果)默认是’swing’, fn(回调函数 ))
演示

<div class ="one"></div>
<button></button>
<script>
	$('.box').hide()	隐藏div
	$('.box').show()	显示div
	点击按钮可以使div在显示和隐藏两个效果中切换
	 $('button').click(function() {
            $('.box').toggle()
        })
</script>

滑动

也有三个方法

slideDown()		向下滑动
slideUp()		向上滑动
slideToggle()		上下滑动切换

也接受三个参数
(speed(速度), easing(指定切换效果)默认是’swing’, fn(回调函数 ))

<div class ="one"></div>
<button></button>
<script>
	$('.box').slideDown()	向上滑
	$('.box').slideUp()	 	向下滑
	点击按钮可以使div在上和下滑动两个效果中切换
	 $('button').click(function() {
            $('.box').slideToggle()
        })
</script>

淡入淡出

也接受三个参数
(speed(速度), easing(指定切换效果)默认是’swing’, fn(回调函数 ))

fadeIn()		淡入
fadeOut()		淡出
fadeToggle()	淡入淡出相互切换
fadeTo()		修改透明度

自定义动画 (重点)

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

1. params:想要修改样式的属性,以对象形式传递,必须写,属性名不用带引号,如果是复合属性要采用驼峰命名法,其余的参数都可以省略

2. speed : 速度参数 (‘slow’, ‘normal’, ‘fast’) 可省略或者可以用数值表示毫秒数(1000)
3. .easing: 切换的效果,默认是’swing’. 可省略 可以修改成 "linear"
4. fn(): 回调函数,如果需要在动画完成之后再有其他操作,就可以添加回调函数
例子

我要点击按钮然后这个div运动到我想要的位置,运动完后再变成黄色

 <button>运动</button>
    <div class="box"></div>
    <script>
        $('button').click(function() {
            $('.box').animate({
                left: 200,
                top: 200
                //这里2000,指的是执行动画的时间
            }, 2000, function() {
                $('.box').css('backgroundColor', 'yellow')
            })
        })
    </script>