jQuery animate hover メモ

JavaScript jQuery design

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Jquery メモ</title>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
</head>


<body>
<style>
/*- fadeBTN フェードボタン hover*/

.fadeBtn {
min-width: 200px;
min-height: 70px;
color: #000;
font-size: 18px;
font-weight: bold;
line-height: 70px;
text-align: center;
display: inline-block;
overflow: hidden;
background: #ddd;
border: #fff solid 2px;
box-shadow: 0 0 3px #555;
}

/*- 02 btn cssAnim -*/

.cssAnim {
padding: 15px 0;
min-width: 150px;
color: #000;
font-weight: bold;
text-align: center;
display: inline-block;
background-color: #cfcfcf;
border: solid #999 1px;
transition: all 0.2s ease;
}

.fadeBtn_2 {
min-width: 200px;
min-height: 70px;
color: #000;
font-size: 18px;
font-weight: bold;
line-height: 70px;
text-align: center;
display: inline-block;
overflow: hidden;
background: #ddd;
border: #fff solid 2px;
box-shadow: 0 0 3px #555;
transition: all 0.2s ease;
}

.fadeBtn_3 {
min-width: 200px;
min-height: 70px;
color: #000;
font-size: 18px;
font-weight: bold;
line-height: 70px;
text-align: center;
display: inline-block;
overflow: hidden;
background: #ddd;
border: #fff solid 2px;
box-shadow: 0 0 3px #555;
transition: all 0.2s ease;
}

.fadeBtn_4 {
min-width: 200px;
min-height: 70px;
color: #000;
font-size: 18px;
font-weight: bold;
line-height: 70px;
text-align: center;
display: inline-block;
overflow: hidden;
background: #ddd;
border: #fff solid 2px;
box-shadow: 0 0 3px #555;
transition: all 0.8s ease;
}

.to {
border-radius: 15px;
}

.rotateX {
transform: rotateX(360deg);
}

.rotateY {
transform: rotateY(180deg);
}

.scaleA {
transform: scale(1.55);
}

</style>

<a href="#" class="fadeBtn">BUTON_01</a>

<a href="#" class="cssAnim">BUTTON_02</a>

<a href="#" class="fadeBtn_2">BUTON_02</a>

<a href="#" class="fadeBtn_3">BUTON_02</a>

<a href="#" class="fadeBtn_4">BUTON_02</a>

<script>
/*- hover btn */
$(function(){
$('.fadeBtn').hover(function(){
$(this).stop().animate({fontSize:'26px', opacity: '0.4'},400);
}, function(){
$(this).stop().animate({fontSize:'18px', opacity:'1'},400);
});
});
/*- hover btn */

/*- addClass removeClass */
$(function(){
$('.cssAnim').hover(function(){
$(this).addClass('to');
}, function(){
$(this).removeClass('to');
});

$('.fadeBtn_2').hover(function(){
$(this).addClass('rotateX');
}, function(){
$(this).removeClass('rotateX');
});

$('.fadeBtn_3').hover(function(){
$(this).addClass('rotateY');
}, function(){
$(this).removeClass('rotateY');
});

$('.fadeBtn_4').hover(function(){
$(this).addClass('scaleA');
}, function(){
$(this).removeClass('scaleA');
});

});

 

 

</script>
</body>

</html>