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>