使用easing1.3.js彈跳效果到精靈圖標

我嘗試使用jQuery Easing將彈跳垂直效果應用到我的社交導航圖標，但我對js不熟悉，所以我需要一些幫助。使用easing1.3.js彈跳效果到精靈圖標

HTML

<ul class="social"> 
    <li class="facebook"><a class="bounce" href="http://facebook.com"></a></li> 
    <li class="twitter"><a class="bounce" href="http://twitter.com"></a></li> 
</ul>

CSS

ul.social li a { 
    float: left; 
    height: 28px; 
    width: 30px;   
    display: inline-block; 
    background: url("http://s14.postimg.org/ufud6x5n1/social.png") no-repeat; 
} 
ul.social li.facebook a { 
    background-position: 0 0; 
} 
ul.social li.twitter a { 
    background-position: -30px 0; 
} 
ul.social li.facebook a:hover { 
    background-position: 0 -28px; 
} 
ul.social li.twitter a:hover { 
    background-position: -30px -28px; 
}

這裏是我的問題。

$(document).ready(function() { 
    $('.bounce').hover(function() { 
    $(this).animation(1000, "easeOutBounce"); 
    }); 
});

我該怎麼做才能使背景彈跳鼠標懸停，然後申請一個鼠標「正常」的緩解作用了呢？

我做了一個CodePen here

任何幫助將是非常讚賞:) （...和抱歉我不好英語）

來源

2015-04-29 dragoeco

$（this）.animation（1000，「easeOutBounce」}）;必須是$（this）.animation（1000，「easeOutBounce」）; – Grumpy

哎呀，對不起，我的錯誤。我做了更正。我的問題仍然是開放的，但感謝您對Grumpy的評論。 – dragoeco

這個工程除了在Firefox。仍在調查......

$(".bounce").mouseover(function(){ 
    $(this).stop().animate({'background-position-y':'-28px'},{queue:false, duration:600, easing: 'easeOutBounce'}) 
}); 
$(".bounce").mouseout(function(){ 
    $(this).stop().animate({'background-position-y':'0'},{queue:false, duration:800, easing: 'linear'}) 
});

編輯：好吧，我發現我的答案：
1.使用jQuery Background Position Animation Plugin（研究發現，答案here）
2.而這個作品也與Firefox

$(".bounce-fb").mouseover(function(){ 
    $(this).stop().animate({'backgroundPosition':'0 -28px'},{queue:false, duration:600, easing: 'easeOutBounce'}) 
}); 
$(".bounce-fb").mouseout(function(){ 
    $(this).stop().animate({'backgroundPosition':'0 0'},{queue:false, duration:800, easing: 'linear'}) 
}); 

$(".bounce-tw").mouseover(function(){ 
    $(this).stop().animate({'backgroundPosition':'-30px -28px'},{queue:false, duration:600, easing: 'easeOutBounce'}) 
}); 
$(".bounce-tw").mouseout(function(){ 
    $(this).stop().animate({'backgroundPosition':'-30px 0'},{queue:false, duration:800, easing: 'linear'}) 
});

一切正如我現在想要的那樣工作。請參閱DEMO

來源

2015-04-29 13:42:15 dragoeco

使用easing1.3.js彈跳效果到精靈圖標

回答

相關問題