當我拖動光標時動畫被粘住

我是一個超級新手（上週我在codeAcademy上學過html，css，jQuery），所以這可能是一個愚蠢的問題。但是，當我在下面的示例中快速拖動光標時，動畫似乎會粘住，換句話說，塊仍然不透明。你能幫助我嗎？我的代碼在下面鏈接。先謝謝你。當我拖動光標時動畫被粘住

http://jsfiddle.net/ivanjsfiddle00/eFShc/1/

$(document).ready(function() { 
$(".button").hover(function() { 
    $(this).filter(':not(:animated)').animate({"opacity": 1 }) 
}, function() { 
    $(this).filter(':not(:animated)').animate({"opacity": 0.5 }) 
}); 
});

編輯： 謝謝大家。用stop（true）代替filter（'：not（：animated）'）。

來源

2013-10-14 Ivan P - Digital Alchemist

您需要使用stop()清除事件之間的動畫隊列。這也使你的filter(':not(:animated)')冗餘。

$(".button").hover(function() { 
    $(this).stop(true).animate({ 
     "opacity": 1 
    }) 
}, function() { 
    $(this).stop(true).animate({ 
     "opacity": 0.5 
    }) 
});

Example fiddle

來源

2013-10-14 15:12:36

@ ivanstackoverflow00如果你想要的東西一點比你有什麼以前更加相似，儘量只把'.stop （true）'在第一個函數上。 – Oliboy50

@Rory似乎已經回答了原來的問題，但它是值得指出的是另一種選擇是使用CSS和利用:hover僞元素。

.button { 
    float: left; 
    margin: 1px; 
    opacity: 0.5; 
    display: inline-block; 
    background-color: #757575; 
    width: 50px; 
    height: 50px; 
} 

.button:hover{ 
    background-color:#323a44; 
}

來源

2013-10-14 15:15:08

檢測，如果該元素是在動畫之前動畫您的動畫代碼前加if($(this).is(":animated")) return false;

來源

2013-10-14 15:20:26 ohmygirl

當我拖動光標時動畫被粘住

回答

相關問題