Jquery第二课--效果

2019-09-17 22:04:17 阅读：274 来源： 互联网

标签：Jquery function slow 第二课效果 next click slideDown

a.
show()显示
hide()隐藏
toggle()切换上面两个方法
b.
fadeIn() 淡入
fadeOut() 淡出
fadeToggle()切换上面两个方法
fadeTo()允许渐变为给定的不透明度（值介于 0 与 1 之间）
c.
slideDown() 向下滑显示
slideUp() 向上滑动隐藏
slideToggle()切换上面两个方法
d.
animate({})动画
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
e.
stop() 停止滑动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- <button id="button1">效果1</button>
    <button id="button2">效果2</button>
    <div style="background-color: red;width: 100px;height: 100px;"></div>
    <div style="background-color: yellow;width: 100px;height: 100px;display: none;"></div>
    <button id="button3">效果3</button>
    <div style="background-color: blue;width: 100px;height: 100px;display: none;"></div>
    <button id="button4">效果4</button>
    <div style="background-color: green;width: 100px;height: 100px;display: none;"></div>
    <button id="b5">效果5</button>
    <div style="background-color: greenyellow;width: 100px;height: 100px;"></div>
    <button id="b6">效果6</button>
    <div style="background-color: greenyellow;width: 100px;height: 100px;"></div> -->
    <!-- <button id="b7">效果7</button>
    <div style="background-color: greenyellow;width: 100px;height: 100px;"></div> -->
    <!-- <button id="b8">b8</button>
    <div style="background-color: greenyellow;width: 100px;height: 100px;display: none"></div> -->
    <!-- <button id="b9">b9</button>
    <div style="background-color: greenyellow;width: 100px;height: 100px;"></div> -->
    <!-- <button id="b10">b10</button>
    <div style="background-color: greenyellow;width: 100px;height: 100px;"></div> -->
    <!-- <button id="a">a</button>
    <div style="background-color: greenyellow;width: 100px;height: 100px;position: absolute"></div> -->
    <button id="b">b</button>
    <button id="b1">b1</button>
    <div id="b2" style="background-color: greenyellow;width: 100px;height: 100px;display: none"></div>
</body>
</html>
<script src="./jquery-3.4.1.min.js"></script>
<script>
$(function(){
    $('#b').click(function () { 
        $('#b2').slideDown(5000)
    });
    $('#b1').click(function () { 
        $('#b2').stop()
     })
    $("#a").click(function(){
        $(this).next().animate({left:'250px',width:'200px'});
    });
    $('#b10').click(function () { 
        $(this).next().slideToggle();
     });
    $('#b9').click(function () { 
        $(this).next().slideUp();
     });
    $('#b8').click(function () { 
        $(this).next().slideDown();
     });
    $('#b7').click(function () { 
        $(this).next().fadeTo('slow','0.3')
     });
    $('#button1').click(function(){
        $(this).next().next().hide('slow',function(){
            alert(123)
        });
    });
    $('#button2').click(function(){
        $(this).next().next().show('slow');
    });
    $('#button3').click(function(){
        $(this).next().toggle('slow');
    });
    $('#button4').click(function(){
        $(this).next().fadeIn('slow')
    });
    $('#b5').click(function () { 
        $(this).next().fadeOut('slow')
     });
    $('#b6').click(function () { 
    $(this).next().fadeToggle('slow')
    })
})
</script>

标签：Jquery,function,slow,第二课,效果,next,click,slideDown
来源： https://blog.csdn.net/weixin_36691991/article/details/100941244

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Jquery第二课--效果