fadeIn() fadeOut()
淡入與淡出
等於加上opacity的動態變化
功能介紹:點開任一PROBLEM後,點選其他PROBLEM會産生
- 原ANSWER收合
- 新ANSWER展開
撰寫方法:命令系統在每次點擊時執行
- 收合所有ANSWER
- 展開指定ASNWER
ul
li
div.problem PROBLEM A
div.ans ANSWER A
li
div.problem PROBLEM B
div.ans ANSWER B
li
div.problem PROBLEM C
div.ans ANSWER C
li
div.problem PROBLEM D
div.ans ANSWER D
ul
display: inline-block
li
display: block
margin: 10px
.problem
padding: 10px 15px 10px 15px
background-color: #90a955
color: #fff
.ans
padding: 15px
background-color: #ebf9de
display: none
$("li").click(
function() {
//淡出關閉所有answer
$(".ans").fadeOut();
//打開指定的answer
$(this).find(".ans").fadeIn();
}
);
Display
slideDown() slideUp()
滑下與滑上
等於加上height的動態變化
//CSS HTML同上
$("li").click(
function() {
//滑上關閉所有answer
$(".ans").slideUp();
//滑下打開指定的answer
$(this).find(".ans").slideDown();
}
);
Display
fadeToggle
淡出的開關
點一下PROBLEM打開,再點一下收起來
//CSS HTML同上
$("li").click(
function() {
$(this).find(".ans").fadeToggle();
}
);
Display
slideToggle
滑出的開關
點一下PROBLEM打開,再點一下收起來
//CSS HTML同上
$("li").click(
function() {
$(this).find(".ans").slideToggle();
}
);