jQuery ------ Effects

jQuery - hide and show

1. hide(): hide
2. show(): show
3. toggle(): 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 - Fade in and out

1. fadeIn(): fade in
2. fadeOut(): fade out
3. fadeTo(): ​​gradient

    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 - swipe

1. slideDown(): slide down
2. slideUp(): slide up
3. slideToggle(): toggle

    #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 - animation

1. The animate() method is used to create custom animations.

2. grammar:$(selector).animate({params},speed,callback)

1. The required params parameter defines the CSS properties that form the animation.
2. The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds.
3. The optional callback parameter is the name of the function to execute after the animation is complete.

Manipulate a single property: click the button, move the div right by 200 pixels

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

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

Operate multiple properties: click the button, move 200px to the right, change the transparency to 0.5, and change the height to 150px

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

jQuery - stop animation

1. stop(): Used to stop animations or effects before they finish.
2. The stop() method works with all jQuery effect functions, including slides, fades, and custom animations.
3. grammar:$(selector).stop(stopAll,goToEnd);

1. The optional stopAll parameter specifies whether the animation queue should be cleared. The default is false, which stops only the active animation, allowing any queued animations to execute backwards.
2. The optional goToEnd parameter specifies whether the current animation should finish immediately. Default is false.

Click the button div to slide down, when the click stops to slide down, stop the slide

    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 - chain

1. Chain: Allows us to run multiple jQuery methods (on the same element) in one statement.

Click the button, the font will turn red, first hide and then display

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

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