JQuery製作Button滑入動畫

 1.Hover改變字體大小及背景透明度
HTML中配置fadeBtn類別名稱按鈕
<a href=”#” class=”fadeBtn”>Button</a>
CSS設定按鈕大小及顏色
.fadebtn {
width: 150px;
height: 50px;
line-height: 50px;
color: #000;
font-size: 18px;
font-weight: bold;
text-align: center;
display: inline-block;
overflow: hidden;
background-color: #ddd;
border: 2px solid #fff;
box-shadow: 0 0 3px #555;
}

JQuery寫入效果
$(‘.fadebtn’).hover(function(){
$(this).stop().animate({opacity: ‘0.5’,fontSize:’22px’},300);
},function(){
$(this).stop().animate({opacity: ‘1’ ,fontSize: ’18px’},300);
});
2.Hover改變BorderRadius圓角
HTML中配置cssAnim類別名稱按鈕
<a href=”#” class=”cssAnim cssAnim2″>Button</a>
CSS設定按鈕大小及顏色
.cssAnim {
padding: 15px 0;
width: 150px;
color: #000;
font-weight: bold;
text-align: center;
display: inline-block;
overflow: hidden;
background-color: #cfcfcf;
border: 1px solid #999;
transition: all 0.3s linear;
margin-left: 0.6em;
}

.bdrRaidus {
border-radius: 15px;
}

.bgColor {
color: #fff;
background: #000;
}
JQuery寫入效果
$(‘.cssAnim’).hover(function(){
$(this).addClass(‘bgColor’);
},function(){
$(this).removeClass(‘bgColor’);
});

$(‘.cssAnim2’).hover(function(){
$(this).addClass(‘bdrRaidus’);
},function(){
$(this).removeClass(‘bdrRaidus’);
});
3.Hover製造rotateX效果
HTML中配置cssAnim類別名稱按鈕
<a href=”#” class=”cssAnim cssAnim2″>Button</a>
CSS設定X軸旋轉角度
.rotateX {
transform: rotateX(360deg);
}
JQuery寫入效果
$(‘.cssAnim3’).hover(function(){
$(this).addClass(‘rotateX’);
},function(){
$(this).removeClass(‘rotateX’);
});
4.Hover製造rotateY效果
HTML中配置cssAnim類別名稱按鈕
<a href=”#” class=”cssAnim cssAnim2″>Button</a>
CSS設定Y軸旋轉角度
.rotateY {
transform: rotateY(360deg);
}
JQuery寫入效果
$(‘.cssAnim3’).hover(function(){
$(this).addClass(‘rotateY’);
},function(){
$(this).removeClass(‘rotateY’);
});