jQuery/fadeIn(),fadeOut()

解説要素フェードin,out

sample1

sentence01 sentence01 sentence01

つづき

sentence02 sentence02 sentence02

消す

sample1code

$(function(){
  $("#continue").click(function(){
	$("#sentence02").fadeIn();
  });
  $("#delete").click(function(){
	$("#sentence02, #continue").fadeOut();
  });
});

sample2

s2Div

sample2code

$(function(){
  $("#s2Btn").click(function(){
  	if($("#s2Div").hasClass("s2Class")){
  	  $("#s2Div").fadeOut().removeClass("s2Class");
  	} else {
  	  $("#s2Div").fadeIn().addClass("s2Class");
  	}
  });
});

sample3

s3Div01

s3Div02

s3Div03

sample3code

$(function(){
  $(window).scroll(function(){
  	if($(this).scrollTop() > $("#s3Div01").offset().top){
  	  $("#s3Div01").fadeIn(3000);
  	}
  	if($(this).scrollTop() > $("#s3Div02").offset().top){
  	  $("#s3Div02").fadeIn(4000);
  	}
  	if($(this).scrollTop() > $("#s3Div03").offset().top){
  	  $("#s3Div03").fadeIn(5000);
  	}
  });
});

sample4

s4Div

sample4code

$(function(){
  var tm = setInterval(function(){
    $("#s4Div").fadeOut(500,function(){$(this).fadeIn(500)});
  },1000);
  $("#s4Div").click(function(){
  	clearInterval(tm);
  });
});

sample5

aaa

ccc

bbb

ccc

aaa

bbb

ccc

aaa

bbb

sample5code

$("#allBtn").click(function(){
  $(".aaa").fadeIn(300);
  $(".bbb").fadeIn(300);
  $(".ccc").fadeIn(300);
});
$("#aBtn").click(function(){
  $(".aaa").fadeIn(300);
  $(".bbb").fadeOut(300);
  $(".ccc").fadeOut(300);
});
$("#bBtn").click(function(){
  $(".aaa").fadeOut(300);
  $(".bbb").fadeIn(300);
  $(".ccc").fadeOut(300);
});
$("#cBtn").click(function(){
  $(".aaa").fadeOut(300);
  $(".bbb").fadeOut(300);
  $(".ccc").fadeIn(300);
});