動畫收合:fadeIn(), slideDown(), fadeToggle(), slideToggle()

fadeIn()  fadeOut()

淡入與淡出

等於加上opacity的動態變化

功能介紹:點開任一PROBLEM後,點選其他PROBLEM會産生

  1. 原ANSWER收合
  2. 新ANSWER展開
撰寫方法:命令系統在每次點擊時執行
  1. 收合所有ANSWER
  2. 展開指定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
  • PROBLEM A
    ANSWER A
  • PROBLEM B
    ANSWER B
  • PROBLEM C
    ANSWER C
  • PROBLEM D
    ANSWER D

slideDown()  slideUp()

滑下與滑上

等於加上height的動態變化

//CSS HTML同上
$("li").click(
 function() {
  //滑上關閉所有answer
  $(".ans").slideUp();
  //滑下打開指定的answer
  $(this).find(".ans").slideDown();
 }
);
Display
  • PROBLEM A
    ANSWER A
  • PROBLEM B
    ANSWER B
  • PROBLEM C
    ANSWER C
  • PROBLEM D
    ANSWER D

fadeToggle

淡出的開關

點一下PROBLEM打開,再點一下收起來

//CSS HTML同上
$("li").click(
 function() {
  $(this).find(".ans").fadeToggle();
 }
);
Display
  • PROBLEM A
    ANSWER A
  • PROBLEM B
    ANSWER B
  • PROBLEM C
    ANSWER C
  • PROBLEM D
    ANSWER D

slideToggle

滑出的開關

點一下PROBLEM打開,再點一下收起來

//CSS HTML同上
$("li").click(
 function() {
  $(this).find(".ans").slideToggle();
 }
);
Display
  • PROBLEM A
    ANSWER A
  • PROBLEM B
    ANSWER B
  • PROBLEM C
    ANSWER C
  • PROBLEM D
    ANSWER D

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *