jQuery - 將元素滑動到左側並更改其樣式

這裏我有一個簡單的div，其中包含圖像和文本。此外，我還有一個鏈接.remove，我想將它製作爲向左滑動並更改其背景，文本等。jQuery - 將元素滑動到左側並更改其樣式

到目前爲止，我已經做到了。但是有一個小錯誤（當你快速懸停幾次時檢查它）。

$(document).ready(function() { 
    $('.remove').hover(function() { 
     $(this).animate({ 
      width: '85px' 
     }); 
    }, 

    function() { 
     $(this).animate({ 
      width: '11px' 
     }) 
    }); 
});

這裏是一個演示 - http://jsfiddle.net/9jQtt/

這是我想達到的目標：

enter image description here

來源

2013-07-01 Ivanka Todorova

的問題是，如果你徘徊在進出快，動畫只是堆向上。使用它通過的MouseEnter觸發或懸停事件jQuery的.animate（）函數時http://jsfiddle.net/9jQtt/1/

來源

2013-07-01 23:54:12

這是很常見的：你需要通過調用.stop()取消前動畫：

$(document).ready(function(){ 
    $('.remove').hover(function(e){ 
     $(this).stop().animate({width: '85px'}); 
    }, 
    function(e){ 
     $(this).stop().animate({width: '11px'}) 
    }); 
});

例。對付這種情況的標準方法是使用.stop（）函數，如：

$(this).stop().animate({ width: "85px" });

但你可能想嘗試不同的東西也該在此說明：http://css-tricks.com/examples/jQueryStop/

其實用的stop（）沒有完成就停止動畫。根據您的情況或者您需要，您可以讓動畫完成並禁用排隊功能。這是在上面的鏈接解釋。

來源

2013-07-02 00:02:26 kunal18

雖然我愛我一些jQuery，但您應該考慮只使用CSS3 transitions（支持它們的瀏覽器），並讓較舊的瀏覽器具有非動畫轉換。

一個工作，你fiddle is here的CSS3編輯，與相關的CSS：

.author .remove:hover { 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
    width:80px; 
}

來源

2013-07-02 00:57:08 Carl

jQuery - 將元素滑動到左側並更改其樣式

回答

相關問題