標籤彙整:animate()

Magic Line

參考範例:CSS-TRICK

ul#nav
 li.current ABOUT
 li.2 STORY
 li INFO
 li TICKETS
 //li#line
ul
 position: relative

li
 display: inline-block
 padding: 0px
 margin-right: 10px
 color: #a3a3a3
 transition-duration: 0.5s
 font-size: 26px
 position: relative
 &:hover
  color: #000
//下底線樣式
#line
 position: absolute
 //初始位置(可以去console帶函數算出來)
 left: 40px
 width: 90px
 border-bottom: 3px solid #000
//加入下底線
$("#nav").append("<li id='line'></li>");

//滑鼠觸發
//hover(移進去的動作, 移出後的動作);
$("li").hover(
 //移入
 function() {
 $("#line").stop().animate({
 left: $(this).position().left,
 width: $(this).width()
 })
 },

 //移出
 function() {
 $("#line").stop().animate({
 left: "40px",
 width: "90px"
 })
 }
);

原生版本

var nav = document.querySelector("#nav");
var createLine = document.createElement("li");
createLine.id = "line";

nav.appendChild(createLine);
var now = document.querySelector("#now");
var li = document.querySelectorAll(".li");
for (i = 0; i < li.length; i++) {
 li[i].addEventListener("mouseover",
 function() {
 createLine.style.left = this.offsetLeft + "px";
 createLine.style.width = this.offsetWidth + "px";
 }
 );
 li[i].addEventListener("mouseout",
 function() {
 createLine.style.left = now.offsetLeft + "px";
 createLine.style.width = now.offsetWidth + "px";
 }
 )
}

Display

jQuery動畫:animate()

可以變動CSS長、寬、大小等屬性,做出動畫的效果

animate()結構

.animate({
    "CSS 屬性": "值",
    "CSS 屬性": "值",
    "CSS 屬性": "值"
}, 動畫時間)

範例

#ani click me
#ani
 width: 300px
 height: 100px
 border: 1px solid #000
 text-align: center
 line-height: 75px
 font-size: 20px
 background-color: #90a955
 color: #fff
$("#ani")
 //滑鼠進入
 .mouseover(
  function(){
   //在.animate前面加stop(),滑鼠拿走後不會繼續執行動畫
   $("#ani").stop().animate(
    {
     //"CSS屬性": "值"
     "font-size": "40px"
     //毫秒
    },500)
  //滑鼠移出
  .mouseout(
   function(){
    $("#ani").stop().animate(
     {"font-size": "20px"}
     ,500)
   } 
  );
 })