jQuery/delay()

解説実行までの遅延時間を指定

sample1

①

②

sample1code

$(function() {
  $("#sample1Btn").click(function() {
    $("#sample1box1").fadeOut(400).delay(1500).fadeIn(300);
    $("#sample1box2").fadeOut(400).fadeIn(300);
  });
});

sample2

①

②

③

sample2code

$(function(){
  $("#sample2Btn").click(function(){
    $("#block1").toggle("slow");
    $("#block2").delay(1000).fadeToggle("slow"); // 1秒後に実行
    $("#block3").delay(2000).slideToggle("slow"); // 2秒後に実行
  });
});

sample3

sentence01

sentence02

sentence03

sample3code

$(function(){
  $("#s3Btn").click(function(){
	$("#s3p01").delay(1000).fadeIn(1000).delay(1000).fadeOut(1000);
	$("#s3p02").delay(4000).fadeIn(1000).delay(1000).fadeOut(1000);
	$("#s3p03").delay(7000).fadeIn(1000).delay(1000).fadeOut(1000);
	$("#s3p01, #s3p02, #s3p03").delay(6000).fadeIn();
  });
});

sample4

@ r i s e

sample4code

function s4Func(){
  $("#s4Div span:eq(0)").delay(200).fadeIn();
  $("#s4Div span:eq(1)").delay(400).fadeIn();
  $("#s4Div span:eq(2)").delay(600).fadeIn();
  $("#s4Div span:eq(3)").delay(800).fadeIn();
  $("#s4Div span:eq(4)").delay(1000).fadeIn();
}