<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>submit</title>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<style>
div{
margin: 3px;
width: 80px;
height: 80px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<input type="button" id="fadeout" value="fadeout"/>
<div id="target">
target
</div>
<script>
$('input[type="button"]').click(function(e){
switch($(e.target).attr('id'))
{
case 'fadeout':
$('#target').fadeOut('slow');
break;
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>submit</title>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<style>
div{
margin: 3px;
width: 80px;
height: 80px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<input type="button" id="fadeout" value="fadeout"/>
<input type="button" id="fadein" value="fadein"/>
<input type="button" id="hide" value="hide"/>
<input type="button" id="show" value="show"/>
<input type="button" id="slidedown" value="slidedown"/>
<input type="button" id="slideup" value="slideup"/>
<input type="button" id="mix" value="mix"/>
<div id="target">
target
</div>
<script>
$('input[type="button"]').click(function(e){
switch($(e.target).attr('id'))
{
case 'fadeout':
$('#target').fadeOut('slow');
break;
case 'fadein':
$('#target').fadeIn();
break;
case 'hide':
$('#target').hide();
break;
case 'show':
$('#target').show();
break;
case 'slidedown':
$('#target').hide().slideDown(5000);
break;
case 'slideup':
$('#target').slideUp('slow');
break;
case 'mix':
$('#target').fadeOut(5000).fadeIn(3000).delay(1000).slideUp('slow').slideDown('slow',function () {
alert('end')
});
break;
}
})
</script>
</body>
</html>
테스트 할 때 target 부분 확인
