標籤彙整：fadeOut

JavaScript, Uncategorized

動畫收合：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();
 }
);