jQuery 04 效果 淡入淡出

Rare's發表於2020-10-31

主要使用四種fade方法實現

fadeIn(speed,backfunction)方法

使元素消失

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

fadeOut(speed, backfunction)方法

使元素出現

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

fadeToggle(speed, backfunction)方法

如果出現則消失,如果消失則出現

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

fadeTo(speed,opacity, backfunction)方法

若隱若現,降低透明度
沒有預設引數,必須傳參

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

相關文章