動畫與jQuery

我有一個問題，我想運行的動畫使文本擺動（我認爲某些元素）顫抖，從而不會很好看搖晃不斷所謂輕微。你可以在這裏看到它的工作示例：動畫與jQuery

說明在寄存器菜單項「左天」的一部分。

HTML片段：

<ul id="menu"> 
    <li></a><a href="register.php">REGISTER</a><div id="register_hover"><span>REGISTER NOW!</span><div id="register_hover_arrow"></div></div></li> 
</ul>

CSS片段：

#menu { 
    text-align: justify; 
    width: 50em; 
    height: 1em; 
} 

#menu li { 
    position: relative; 
} 

#register_hover { 
    -webkit-border-radius: 2px; 
    background-color: #FFA200; 
    -moz-border-radius: 2px; 
    letter-spacing: 0.25em; 
    font-weight: normal; 
    position: absolute; 
    border-radius: 2px; 
    text-align: center; 
    font-size: 0.9em; 
    height: 1.5em; 
    width: 300%; 
    top: -2.5em; 
    left: -100%; 
} 

#register_hover span { 
    position: relative; 
    top: .25em; 
    z-index: 2; 
} 

#register_hover_arrow { 
    margin: 0 auto; 
    -webkit-transform: translateY(-.8em) rotate(45deg); 
    -ms-transform: translateY(-.8em) rotate(45deg); 
    transform: translateY(-.8em) rotate(45deg); 
    background-color: #FFA200; 
    position: relative; 
    height: 1em; 
    z-index: 1; 
    width: 1em; 
    top: .6em; 
}

的JavaScript片段：

var animateDeadlineAlert = function() { 
    var originalYOffset = $('#register_hover').css('top'); 
    $('#register_hover').animate({ 
     'top': '-3em' 
    }, function() { 
     $(this).animate({ 
      'top': originalYOffset 
     }, function() { 
      animateDeadlineAlert(); 
     }); 
    }); 
}; 

animateDeadlineAlert();

的jsfiddle這裏：http://jsfiddle.net/wd0xj3rb/

來源

2015-10-16 tomc

是CSS動畫的可能性？ – Jason

是的，他們很可能就是我會剛剛結束了做什麼，但我想知道爲什麼沒有工作概念 – tomc

這可能不利於該'top'財產迅速像素和EMS之間的切換。 – APAD1

使用翻譯遠比使用jQuery爲top值創建動畫效果更好。動畫使用transform將not triggerlayout或paint，這就是爲什麼它比讓jQuery的手動計算基於像素的正確位置更高性能的元件。

保羅·劉易斯gave an excellent talk，這是非常值得的手錶，他描述你所遇到的問題，在你的元素的運動是風聲鶴唳。

簡單地說：使用transform只要有可能。你所描述的問題似乎很適合我。

.hover { 
 
    position: absolute; 
 
    -webkit-animation: 1s hover-deadline infinite alternate; 
 
    ease; 
 
    animation: 1s hover-deadline infinite alternate; 
 
    ease; 
 
    padding: 1em; 
 
    background: tomato; 
 
    color: white; 
 
    font: bold 1em sans-serif; 
 
} 
 
@-webkit-keyframes hover-deadline { 
 
    from { 
 
    -webkit-transform: translateY(0px) 
 
    } 
 
    to { 
 
    -webkit-transform: translateY(25px) 
 
    } 
 
} 
 
@keyframes hover-deadline { 
 
    from { 
 
    transform: translateY(0px) 
 
    } 
 
    to { 
 
    transform: translateY(25px) 
 
    } 
 
}

<div class="hover">Some text</div>

來源

2015-10-16 17:11:39 Jason

很好的答案，謝謝！ – tomc

按照傑森的回答，就是這樣，因爲是一個有價值的解決方案。我舉了一個例子來說明這一點。

在這個例子中，我使用的線性函數來完成，你在你的代碼有動畫的效果相同。

a { 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 
#menu { 
 
    text-align: justify; 
 
    width: 50em; 
 
    height: 1em; 
 
} 
 
#menu li { 
 
    position: relative; 
 
    width: 5em; 
 
    list-style-type: none; 
 
} 
 
#register_hover { 
 
    -webkit-border-radius: 2px; 
 
    background-color: #FFA200; 
 
    -moz-border-radius: 2px; 
 
    letter-spacing: 0.25em; 
 
    font-weight: normal; 
 
    position: absolute; 
 
    border-radius: 2px; 
 
    text-align: center; 
 
    font-size: 0.9em; 
 
    height: 1.5em; 
 
    width: 300%; 
 
    top: -2.5em; 
 
    left: -100%; 
 
    animation: anim 0.4s linear infinite alternate; 
 
    -webkit-animation: anim 0.4s linear infinite alternate; 
 
} 
 
#register_hover span { 
 
    position: relative; 
 
    top: .25em; 
 
    z-index: 2; 
 
} 
 
#register_hover_arrow { 
 
    margin: 0 auto; 
 
    -webkit-transform: translateY(-.8em) rotate(45deg); 
 
    -ms-transform: translateY(-.8em) rotate(45deg); 
 
    transform: translateY(-.8em) rotate(45deg); 
 
    background-color: #FFA200; 
 
    position: relative; 
 
    height: 1em; 
 
    z-index: 1; 
 
    width: 1em; 
 
    top: .6em; 
 
} 
 
@keyframes anim { 
 
    from { 
 
    transform: translateY(-10px) 
 
    } 
 
    to { 
 
    transform: translateY(0px) 
 
    } 
 
} 
 
@-webkit-keyframes anim { 
 
    from { 
 
    -webkit-transform: translateY(-10px) 
 
    } 
 
    to { 
 
    -webkit-transform: translateY(0px) 
 
    } 
 
}

<br /> 
 
<br /> 
 
<ul id="menu"> 
 
    <li> 
 
    <a href="register.php">REGISTER</a> 
 
    <div id="register_hover"><span>REGISTER NOW!</span> 
 
     <div id="register_hover_arrow"></div> 
 
    </div> 
 
    </li> 
 
</ul>

來源

2015-10-16 17:35:10

@Jason是正確的。如果可能，最好始終使用CSS3動畫。不過，由於動畫非常簡單，它應該與JS一起工作良好。你的問題是你使用了一個完全不同的div來創建底部箭頭。你可以做它只是通過:after

下面是這個概念和解決方案@Jason的組合例建議

https://jsfiddle.net/0LLcc0bb/

來源

2015-10-16 17:35:54

動畫與jQuery

回答

相關問題