jQuery：鼠標滑過時略向右滑動的菜單項

我認爲這很容易做出來，但我並沒有真正習慣jQuery，但我剛開始學習。jQuery：鼠標滑過時略向右滑動的菜單項

通過CSS，我們可以編寫一個項目：hover class並寫入left：20px;對我們的菜單項應用輕微的滑動效果，例如<li> Item </li>

現在我想在平滑動作中實現這一點，即不會在20像素右邊突然出現，但滑動到那裏。我認爲jQuery中的動畫是用於這種動畫的，但我對jQuery非常不滿，我不知道應該在哪裏以及按照什麼順序放置代碼。你能舉一個這樣的例子嗎？ :)

2013-04-15 ofer dofer

你可以做到這一點與CSS動畫也;將不適用於舊的瀏覽器，但舊的瀏覽器用戶甚至可能不會注意到這一點，所以誰在乎 – mikakun

$('li').hover(function(){ 
     $(this).animate({left:20},2000) 
    },function(){ 
     $(this).animate({left:0},2000) 
});

這將動畫<li>當前文檔中所有..你可以給一個類<li>要具體.. 2000是這裏的動畫

來源

2013-04-15 04:52:50 bipen

謝謝，但爲什麼不用'顏色'屬性？ –

你需要使用jQuery.Color（）插件來動畫顏色.. https://github.com/jquery/jquery-color – bipen

的持續時間

您可以像bipen的回答中指出的那樣使用jQuery。

我有一些簡單的CSS來處理懸停轉換，但正如mikakun所說，這將只適用於瀏覽器CSS3檢查caniuse兼容的瀏覽器。

li { 
    /* put your base styles here */ 
} 

li:hover { 
    /* put your new styles here */ 
    transition:all 300ms ease; 
    -moz-transition:all 300ms ease; 
    -webkit-transition:all 300ms ease; 
    -o-transition:all 300ms ease; 
}

這將爲您爲特定元素指定的任何內容放置300ms的過渡。

您可以在行動中看到這個，如果你有一個CSS3兼容的瀏覽器：

http://jsfiddle.net/3leven11/7aRhe/

來源

2013-04-15 05:07:35 samazi

jQuery：鼠標滑過時略向右滑動的菜單項

回答

相關問題