iT邦幫忙

3

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');
});

範例網址
https://codepen.io/amanda328/pen/OoMeZJ

以上為個人學習紀錄
參考書籍為外掛OUT!JQuery高手精技


1 則留言

0
marlin12
iT邦研究生 5 級 ‧ 2018-08-28 22:21:40

你這個button是夾雜CSS3和JQuery animate的動畫效果。
CSS3的速度很快,但有不少效果有瀏覽器兼容性的問題。
JQuery的animate速度很慢,特別在資源有限的手機上。建議轉用較多功能和較快的Velocity.js。

我要留言

立即登入留言