jQuery ------ 效果

jQuery——隐藏与显示

1. hide()：隐藏
2. show()：显示
3. toggle()：切换

	<button id="hide">隐藏</button>
    <button id="show">显示</button>
    <button id="toggle">切换</button>
    <p>Hello jQuery!</p>

    $(function(){
    
     
       $('#hide').click(function(){
    
    
            $('p').hide(1000) // 隐藏
       })
       $('#show').click(function(){
    
    
           $('p').show(1000) // 显示
       })
       $('#toggle').click(function(){
    
    
           $('p').toggle(1000) // 切换
       })
    })

jQuery——淡入淡出

1. fadeIn()：淡入
2. fadeOut()：淡出
3. fadeTo()：渐变

    div{
    
    
        position: absolute;
        width: 150px;
        height: 150px;
        background-color: pink;
    }
    
    <button id="fadeIn">淡入</button>
    <button id="fadeOut">淡出</button>
    <button id="fadeToggle">切换</button>
    <button id="fadeTo">渐变</button><hr/>
    <div></div>

    $(function(){
    
     
       $('#fadeIn').click(function(){
    
    
            $('div').fadeIn(1000) // 1s淡入
       })
       $('#fadeOut').click(function(){
    
    
            $('div').fadeOut(1000) // 1s淡出
       })
       $('#fadeToggle').click(function(){
    
    
            $('div').fadeToggle(1000) // 切换
       })
       $('#fadeTo').click(function(){
    
    
            $('div').fadeTo('slow',0.5) // 渐变到0.5透明度
       })
    })

</body>
</html>

jQuery——滑动

1. slideDown()：向下滑动
2. slideUp()：向上滑动
3. slideToggle()：切换

    #panel,#flip {
    
    
        padding:5px;
        text-align:center;
        background-color:#e5eecc;
        border:solid 1px #c3c3c3;
    }
    #panel {
    
    
        padding:50px;
        display:none;
    }

    <div id="flip">点我滑下面板</div>
    <div id="panel">Hello world!</div>

    $(function(){
    
    
        $('#flip').click(function(){
    
    
            $('#panel').slideToggle(500)
        })
    })

jQuery——动画

1. animate() 方法用于创建自定义动画。

2. 语法：$(selector).animate({params},speed,callback)

1. 必需的 params 参数定义形成动画的 CSS 属性。
2. 可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
3. 可选的 callback 参数是动画完成后所执行的函数名称。

操作单个属性：点击按钮，div右移200个像素

	$(function(){
    
    
        $('button').click(function(){
    
    
            $('div').animate({
    
    left:200})
        })
    })

注意：对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

操作多个属性：点击按钮，右移200px，透明度改为0.5，高度改为150px

	$(function(){
    
    
        $('button').click(function(){
    
    
        	var div = $('div')
            div.animate({
    
    
				left: '200px',
				opacity: '0.5',
				height: '150px' 
			})
        })
    })

jQuery——停止动画

1. stop()：用于停止动画或效果，在它们之前完成。
2. stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
3. 语法：$(selector).stop(stopAll,goToEnd);

1. 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
2. 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

点击按钮div下滑，当点击停止下滑时，停止滑动

    div{
    
    
        width: 120px;
        height: 300px;
        display: none;
        background-color: lightblue;
    }

    <button>开始滑动</button>
    <button>停止滑动</button>
    <div></div>

    $(function(){
    
    
        $("button").eq(0).click(function(){
    
    
            $('div').slideDown(2000)
        })
        $("button").eq(1).click(function(){
    
    
            $('div').stop()
        })
    })

jQuery——链

1. 链：允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

点击按钮，字体变红色，先隐藏后显示

    
    <p>Hello World!</p>
    <button>点我</button>
    
    $(function() {
    
    
        $('button').click(function(){
    
    
            $('p').css('color','red').slideUp(2000).slideDown(2000)
        })
    })

不积跬步无以至千里 不积小流无以成江海