1. 程式人生 > >jQuery效果——隱藏和顯示、淡入淡出、滑動

jQuery效果——隱藏和顯示、淡入淡出、滑動

jquery(javascript庫,極大簡化了javascript程式設計)

jquery選擇器

元素選擇器:

<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h1>標籤</h1>
<p>i</p>
<p>love</p>
<p>you</p>
<button onclick="click()">點我</button>
</body>
<html>
<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h1>標籤</h1>
<p>i</p>
<p>love</p>
<p>you</p>
<button>點我</button>
</body>
<html>

css選擇器:

一個屬性:例如:$("p").css("background-color","red");
                                $("p").css("border","3px solid red");
多個屬性:         $("p").css({background:'#ccc',color:'blue'});

jquery效果——隱藏和顯示(使用hide()、show()方法)

<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wg").click(function(){
$("p").hide();
});
$(".tg").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<input></input>
<p>如果你點選隱藏按鈕,我將會消失了。</p>
<button class="wg">隱藏</button>
<button class="tg">顯示</button>
</body>
</html>

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

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

可選的speed引數規定隱藏、顯示的速度,可以取以下值:“slow”、“fast”、或毫秒。

可選的callback引數是隱藏或顯示完成之後所執行的函式名稱。

例如,帶有speed引數的hide()方法

<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wg").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<input></input>

<button class="wg">隱藏</button>
<p>如果你點選隱藏按鈕,我將會1000毫秒後消失了。</p>
</body>
</html>

 使用toggle()方法來切換hide()和show()方法。

顯示被隱藏的元素,並隱藏已顯示的元素:

<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wg").click(function(){
$("p").toggle("slow");
});
});
</script>
</head>
<body>
<button class="wg">隱藏/顯示</button>
<p>我可以隱藏,也可以顯示。</p>
</body>
</html>

語法:$(selector).toggle(speed,callback);

           可選的speed引數規定隱藏、顯示的速度,可以取以下值:“slow”、“fast”、或毫秒。

          可選的callback引數是隱藏或顯示完成之後所執行的函式名稱。

          可選的callback引數,具有以下三點說明:

        1. $(selector)選中的元素的個數為n個,則callback函式會執行n次。

        2.callback函式名後加括號,會立即執行函式體,而不是等到隱藏/顯示完成後才執行。

        3.callback既可以是函式名,也可以是匿名函式。

jQuery效果——淡入淡出

jquery擁有下面四種fade方法:

1.fadeIn()方法    用於淡入已隱藏的元素。

  語法:$(selector).fadeIn(speed,callback);

<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wg").click(function(){
$(".div1").fadeIn("slow");
$(".div2").fadeIn();
$(".div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>以下例項演示了fadeIn()使用不同引數的效果。</p>
<button class="wg">點選淡入div元素</button>
<div class="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div class="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

注意:display:none;與display:block; 的區別。

2.fadeOut()方法:用於淡出可見元素。

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

<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wg").click(function(){
$(".div1").fadeOut("slow");
$(".div2").fadeOut();
$(".div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>以下例項演示了fadeOut()使用不同引數的效果。</p>
<button class="wg">點選淡出div元素</button>
<div class="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div class="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div class="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

 3.fadeToggle()方法

    可以在fadeIn()和fadeOut()方法間進行切換。

    如果元素已淡出,則fadeToggle()會向元素新增淡入元素。

    如果元素已淡入,則fadeToggle()會向元素新增淡出元素。

    語法:$(selector).fadeToggle(speed,callback);

<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wg").click(function(){
$(".div1").fadeToggle("slow");
$(".div2").fadeToggle();
$(".div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>以下例項演示了fadeToggle()使用不同speed引數的效果。</p>
<button class="wg">點選淡出或淡入</button>
<div class="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div class="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div class="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

4.fadeTo()方法

       允許漸變為給定的不透明都度(值介於0與1之間)

      語法:$(selector).fadeTo(speed,opacity,callback);

       opacity引數將淡入淡出效果設定為給定的不透明度(值介於0與1之間)

<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".wg").click(function(){
$(".div1").fadeTo("slow",0.15);
$(".div2").fadeTo("slow",0.4);
$(".div3").fadeTo("slow",0.7);
});
});
</script>
</head>
<body>
<p>以下例項演示了fadeTo()不同透明度的效果</p>
<button class="wg">點選我讓顏色變淡</button>
<div class="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div class="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div class="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

jQuery效果——滑動

1.slideDown()方法     用於向下滑動元素

   語法:$(selector).slideDown(speed,callback);

<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
</script>
<style type="text/css">
#flip,#panel{
    padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel{
   padding:50px;
   display:none;
}
</style>
</head>
<body>
<div id="flip">點我滑下面板</div>
<div id="panel">I LOVE YOU !</div>
</body>
</html>

2.slideUp()方法      用於向上滑動元素

<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideUp("slow");
});
});
</script>
<style type="text/css">
#flip,#panel{
    padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel{
   padding:50px;
  
}
</style>
</head>
<body>
<div id="flip">點我拉起面板</div>
<div id="panel">I LOVE YOU !</div>
</body>
</html>

注意使用slideUp()和slideDown()的區別:display:none

3.slide Toggle()方法

    用於slideUp()和slideDown()方法之間進行切換。

    如果元素向下滑動,則slideToggle()可向上滑動它們。

   如果元素向上滑動,則slideToggle()可向下滑動它們。

<html>
<head>
<meta charset="utf-8"/>
<script src="jquery(1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
#flip,#panel{
    padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel{
   padding:50px;
   display:none;
}
</style>
</head>
<body>
<div id="flip">點我拉起面板</div>
<div id="panel">I LOVE YOU !</div>
</body>
</html>