jQuery基礎學習（2）(效果)

小溪彼岸發表於2016-06-29

jQuery效果

a.隱藏效果

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
（1）可選的 speed 引數規定隱藏/顯示的速度，可以取以下值：”slow”、”fast” 或毫秒。
（2）可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".ex .hide").click(function(){
                //設定緩慢隱藏
               // $(this).parents(".ex").hide("slow");
           // });
            $(this).parents(".ex").hide("slow",function(){
                    alert('ddd');
                });
        });
    </script>
    <style type="text/css">
        .ex{
            background-color: #e5eecc;
            padding: 7px;
            border: solid 1px #c3c3c3;
        }
    </style>
</head>
<body>

<h3>中國辦事處</h3>
<div class="ex">
    <button class="hide" type="button">隱藏</button><br>
    <p>聯絡人:張先生<br/>
     北三環中路 100 號<br/>
     北京</p>
</div>

<h3>美國辦事處</h3>
<div class="ex">
    <button class="hide" type="button">隱藏</button>
    <p>聯絡人：David<br />
        第五大街 200 號<br />
        紐約</p>
</div>

</body>
</html>

$("button").click(function(){
  $("p").hide(1000);
});

jQuery toggle()

通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。

顯示被隱藏的元素，並隱藏已顯示的元素：

$(document).ready(function(){
  $("button").click(function(){
  $("p").toggle();
  });
});
</script>

b. jQuery Fading 方法

通過 jQuery，您可以實現元素的淡入淡出效果。
jQuery 擁有下面四種 fade 方法：

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

jQuery fadeIn() 方法

jQuery fadeIn() 用於淡入已隱藏的元素。

語法：

$(selector).fadeIn(speed,callback);

可選的 speed 引數規定效果的時長。它可以取以下值：”slow”、”fast” 或毫秒。

可選的 callback 引數是 fading 完成後所執行的函式名稱

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>

<body>
<p>演示帶有不同引數的 fadeIn() 方法。</p>
<button>點選這裡，使三個矩形淡入</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

jQuery fadeOut() 方法

jQuery fadeOut() 方法用於淡出可見元素。
語法：

$(selector).fadeOut(speed,callback);

可選的 speed 引數規定效果的時長。它可以取以下值：”slow”、”fast” 或毫秒。
可選的 callback 引數是 fading 完成後所執行的函式名稱。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>
</head>

<body>
<p>演示帶有不同引數的 fadeOut() 方法。</p>
<button>點選這裡，使三個矩形淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>

</html>

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
如果元素已淡出，則 fadeToggle() 會向元素新增淡入效果。
如果元素已淡入，則 fadeToggle() 會向元素新增淡出效果。
語法：

$(selector).fadeToggle(speed,callback);

可選的 speed 引數規定效果的時長。它可以取以下值：”slow”、”fast” 或毫秒。
可選的 callback 引數是 fading 完成後所執行的函式名稱。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});
</script>
</head>

<body>

<p>演示帶有不同引數的 fadeToggle() 方法。</p>
<button>點選這裡，使三個矩形淡入淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>

</body>
</html>

jQuery fadeTo() 方法

jQuery fadeTo() 方法允許漸變為給定的不透明度（值介於 0 與 1 之間）。
語法：

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 引數規定效果的時長。它可以取以下值：”slow”、”fast” 或毫秒。
fadeTo() 方法中必需的 opacity 引數將淡入淡出效果設定為給定的不透明度（值介於 0 與 1 之間）。
可選的 callback 引數是該函式完成後所執行的函式名稱。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});
</script>
</head>

<body>

<p>演示帶有不同引數的 fadeTo() 方法。</p>
<button>點選這裡，使三個矩形淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

jQuery 滑動方法

通過 jQuery，您可以在元素上建立滑動效果。
jQuery 擁有以下滑動方法：
slideDown()
slideUp()
slideToggle()

jQuery slideDown() 方法

jQuery slideDown() 方法用於向下滑動元素。
語法：

$(selector).slideDown(speed,callback);

可選的 speed 引數規定效果的時長。它可以取以下值：”slow”、”fast” 或毫秒。
可選的 callback 引數是滑動完成後所執行的函式名稱。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideDown("slow");
  });
});
</script>

<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>

<body>

<div class="panel">
<p>W3School - 領先的 Web 技術教程站點</p>
<p>在 W3School，你可以找到你所需要的所有網站建設教程。</p>
</div>

<p class="flip">請點選這裡</p>

</body>
</html>

jQuery slideUp() 方法

jQuery slideUp() 方法用於向上滑動元素。
語法：

$(selector).slideUp(speed,callback);

可選的 speed 引數規定效果的時長。它可以取以下值：”slow”、”fast” 或毫秒。
可選的 callback 引數是滑動完成後所執行的函式名稱。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideUp("slow");
  });
});
</script>

<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
}
</style>
</head>

<body>

<div class="panel">
<p>W3School - 領先的 Web 技術教程站點</p>
<p>在 W3School，你可以找到你所需要的所有網站建設教程。</p>
</div>

<p class="flip">請點選這裡</p>

</body>
</html>

jQuery slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。
如果元素向下滑動，則 slideToggle() 可向上滑動它們。
如果元素向上滑動，則 slideToggle() 可向下滑動它們。

$(selector).slideToggle(speed,callback);

可選的 speed 引數規定效果的時長。它可以取以下值：”slow”、”fast” 或毫秒。
可選的 callback 引數是滑動完成後所執行的函式名稱。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>

<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>

<body>

<div class="panel">
<p>W3School - 領先的 Web 技術教程站點</p>
<p>在 W3School，你可以找到你所需要的所有網站建設教程。</p>
</div>

<p class="flip">請點選這裡</p>

</body>
</html>

jQuery動畫

jQuery 動畫 - animate() 方法

jQuery animate() 方法用於建立自定義動畫。
語法：

$(selector).animate({params},speed,callback);

必需的 params 引數定義形成動畫的 CSS 屬性。
可選的 speed 引數規定效果的時長。它可以取以下值：”slow”、”fast” 或毫秒。
可選的 callback 引數是動畫完成後所執行的函式名稱。
//一個實現從左到右移動的動畫
demo1:

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script> 
</head>

<body>
<button>開始動畫</button>
<p>預設情況下，所有 HTML 元素的位置都是靜態的，並且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

demo2:

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });
});
</script> 
</head>

<body>

<button>開始動畫</button>
<p>預設情況下，所有 HTML 元素的位置都是靜態的，並且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

demo3:

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});
</script> 
</head>

<body>

<button>開始動畫</button>
<p>預設情況下，所有 HTML 元素的位置都是靜態的，並且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

//屬性的動畫值設定為 "show"、"hide" 或 "toggle"：
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    });
  });
});

jQuery animate() - 使用佇列功能

預設地，jQuery 提供針對動畫的佇列功能。
這意味著如果您在彼此之後編寫多個 animate() 呼叫，jQuery 會建立包含這些方法呼叫的“內部”佇列。然後逐一執行這些 animate 呼叫。

<!DOCTYPE html>
<html>
<head>
    <script src="jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                var div=$("div");
                div.animate({height:'300px',opacity:'0.4'},"slow");
                div.animate({width:'300px',opacity:'0.8'},"slow");
                div.animate({height:'100px',opacity:'0.4'},"slow");
                div.animate({width:'100px',opacity:'0.8'},"slow");
            });
        });
    </script>
</head>

<body>

<button>開始動畫</button>
<p>預設情況下，所有 HTML 元素的位置都是靜態的，並且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>



<html>
<head>
    <meta charset="u">
    <script src="jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                var div=$("div");
                div.animate({left:'100px',opacity:'0.6'},"slow");
                div.animate({fontSize:'3em',color: '2E9ECE'},"slow");
            });
        });
    </script>
</head>

<body>

<button>開始動畫</button>
<p>預設情況下，所有 HTML 元素的位置都是靜態的，並且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

</body>
</html>

jQuery stop() 方法

jQuery stop() 方法用於停止動畫或效果，在它們完成之前。
stop() 方法適用於所有 jQuery 效果函式，包括滑動、淡入淡出和自定義動畫。

<!DOCTYPE html>
<html>
<head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#flip").click(function(){
                $("#panel").slideDown(5000);
            });
            $("#stop").click(function(){
                $("#panel").stop();
            });
        });
    </script>

    <style type="text/css">
        #panel,#flip
        {
            padding:5px;
            text-align:center;
            background-color:#e5eecc;
            border:solid 1px #c3c3c3;
        }
        #panel
        {
            padding:50px;
            display:none;
        }
    </style>
</head>

<body>

<button id="stop">停止滑動</button>
<div id="flip">點選這裡，向下滑動皮膚</div>
<div id="panel">Hello world!</div>

</body>
</html>

jQuery動作的連結

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });
});
</script>
</head>

<body>

<p id="p1">jQuery 樂趣十足！</p>
<button>點選這裡</button>

</body>
</html>

jQuery基礎學習
2020-09-29
jQuery
jQuery基礎效果
2018-06-21
jQuery
jQuery基礎2
2020-10-18
jQuery
前端基礎-jQuery的動畫效果
2018-06-10
前端jQuery動畫
php學習基礎（2）
2017-07-18
PHP
python基礎學習2
2018-08-20
Python
組隊學習2——pandas基礎
2020-12-19
演算法基礎學習2
2021-11-27
演算法
jQuery 基礎樣式篇（2）
2021-09-09
jQuery
演算法基提升礎學習2
2021-12-07
演算法
Kotlin 學習（2） Kotlin基礎
2018-01-31
Kotlin
web基礎學習筆記(二十)之jquery動畫操作
2020-10-01
Web筆記jQuery動畫
jQuery基礎學習(1)(標籤選擇器，事件)
2016-06-28
jQuery事件
jQuery學習（2）ajax()使用
2018-01-17
jQuery
jQuery學習筆記（2）
2013-12-01
jQuery筆記
學習jQuery延時2
2015-06-29
jQuery
Scala學習筆記（2）-基礎語法
2018-10-26
筆記
Docker容器學習梳理 - 基礎知識（2）
2017-03-14
Docker
Docker容器學習梳理–基礎知識（2）
2017-11-27
Docker
javaScript學習基礎篇(2)(彈框，日期)
2016-06-26
JavaScript
免殺學習-基礎學習
2020-12-15
Go 學習筆記 - Go 基礎語法(2)
2021-07-06
Go筆記
Vue2.x學習一：基礎入門
2018-05-31
Vue
jQuery基礎
2021-09-09
jQuery
Docker 基礎學習
2019-09-10
Docker
Flume基礎學習
2019-09-28
Redis 基礎學習
2019-03-06
Redis
Pandas基礎學習
2021-05-10
Scala基礎學習
2019-01-31
【Vue學習】基礎
2020-11-05
Vue
HTML基礎學習
2017-03-28
HTML
Java基礎學習
2014-01-20
Java
JVM基礎學習
2015-03-08
JVM
Hashtable基礎學習
2009-04-08
前端基礎之jQuery基礎
2024-03-23
前端jQuery
Linux基礎學習——檔案基礎
2018-11-04
Linux
量子力學基礎-2
2021-10-31
《Fluid Engine Development》學習筆記2-基礎
2019-06-18
UIdev筆記

jQuery基礎學習（2）(效果)

jQuery toggle()

b. jQuery Fading 方法

jQuery fadeIn() 方法

jQuery fadeOut() 方法

jQuery fadeToggle() 方法

jQuery fadeTo() 方法

jQuery 滑動方法

jQuery slideDown() 方法

jQuery slideUp() 方法

jQuery slideToggle() 方法

jQuery動畫

jQuery animate() - 使用佇列功能

jQuery stop() 方法

jQuery動作的連結

相關文章