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基礎效果
2018-06-21
jQuery
jQuery基礎學習
2020-09-29
jQuery
jQuery基礎2
2020-10-18
jQuery
前端基礎-jQuery的動畫效果
2018-06-10
前端jQuery動畫
python基礎學習2
2018-08-20
Python
jQuery 基礎樣式篇（2）
2021-09-09
jQuery
python基礎學習day2
2024-06-05
Python
演算法基礎學習2
2021-11-27
演算法
組隊學習2——pandas基礎
2020-12-19
web基礎學習筆記(二十)之jquery動畫操作
2020-10-01
Web筆記jQuery動畫
JQuery基礎28_選擇器2
2024-06-18
jQuery
jQuery基礎
2021-09-09
jQuery
演算法基提升礎學習2
2021-12-07
演算法
前端基礎之jQuery基礎
2024-03-23
前端jQuery
Scala學習筆記（2）-基礎語法
2018-10-26
筆記
jQuery基礎教程
2018-10-12
jQuery
《Fluid Engine Development》學習筆記2-基礎
2019-06-18
UIdev筆記
Go 學習筆記 - Go 基礎語法(2)
2021-07-06
Go筆記
Vue2.x學習一：基礎入門
2018-05-31
Vue
免殺學習-基礎學習
2020-12-15
基於jquery實現穿梭框效果
2020-10-20
jQuery
Linux基礎學習——檔案基礎
2018-11-04
Linux
jQuery基礎總結
2024-03-21
jQuery
jQuery 基礎語法
2022-02-27
jQuery
jQuery基礎語法
2020-12-11
jQuery
kafka基礎學習
2024-10-11
Kafka
Zookeeper 基礎學習
2024-10-03
深度學習基礎
2024-08-24
深度學習
Pandas基礎學習
2021-05-10
Docker 基礎學習
2019-09-10
Docker
Flume基礎學習
2019-09-28
【Vue學習】基礎
2020-11-05
Vue
學習linux基礎
2020-12-23
Linux
python基礎學習
2019-02-16
Python
Redis 基礎學習
2019-03-06
Redis
Scala基礎學習
2019-01-31
Linux基礎學習
2018-09-24
Linux
【機器學習基礎】神經網路/深度學習基礎
2021-11-05
機器學習神經網路深度學習
C++基礎學習2-資料型別
2024-11-09
C++資料型別

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動作的連結

相關文章