如何使用不同的按鈕動畫不同的精靈？ （HTML/CSS）

Question

我一直在嘗試使用不同的onClick按鈕觸發器來爲此精靈設置動畫。只有一個按鈕在小提琴中工作。但在我的文件版本中，其他按鈕可以工作，但它們只能工作一次，並且不會重置。 （如在某些按鈕播放中，但只按特定順序播放，然後我無法再按下它們）我假定removeClass會在一段時間後將其刪除，以便它可以返回到原始狀態，以便我可以點擊另一個按鈕，它會從頭開始重複動畫。

HTML

<div class="bannerimg" div id="bannerimg"></div> 
    <div id="sunbutton" class="sunbutton"></div> 
    <div id="waterbutton" class="waterbutton"></div> 
    <div id="foodbutton" class="foodbutton"></div> 

的Javascript

$('#sunbutton').click(function() 
    { 
    $('.bannerimg').addClass('suncheck'); 
     setTimeout(function() 
      { $(this).removeClass('suncheck'); } 
     , 1000); 
    }); 

$('#waterbutton').click(function() 
    { 
    $('.bannerimg').addClass('watercheck'); 
     setTimeout(function() 
      { $(this).removeClass('watercheck'); } 
     , 2000); 
    }); 

$('#foodbutton').click(function() 
    { 
    $('.bannerimg').addClass('foodcheck'); 
     setTimeout(function() 
      { $(this).removeClass('foodcheck'); } 
     , 1); 
    }); 

CSS

.bannerimg { 
    background-image: url(http://www.elainemcheung.com/wp-content/uploads/2014/03/sprite.png); 
    width: 669px; 
    height: 560px; 
} 

.suncheck { 
    animation: sun steps(7) 1s infinite; 
    -webkit-animation: sun steps(7) 1s infinite; 
    -moz-animation: sun steps(7) 1s infinite; 
} 

@keyframes sun { 
    0% {background-position: 0 0; } 
    100% {background-position: -4683px 0;} 
} 
@-webkit-keyframes sun { 
    0% {background-position: 0 0; } 
    100% {background-position: -4683px 0;} 
} 
@-moz-keyframes sun { 
    0% {background-position: 0 0; } 
    100% {background-position: -4683px 0;} 
} 

.foodcheck { 
    animation: food 3s steps(12) 0.15s infinite; 
    -webkit-animation: food 3s steps(12) 0.15s infinite; 
    -moz-animation: food 3s steps(12) 0.15s infinite; 
} 

@keyframes food { 
    0% {background-position: 0 -560; } 
    100% {background-position: -8028px -560;} 
} 
@-webkit-keyframes food { 
    0% {background-position: 0 -560; } 
    100% {background-position: -8028px -560;} 
} 
@-moz-keyframes food { 
    0% {background-position: 0 -560; } 
    100% {background-position: -8028px -560;} 
} 

.watercheck { 
    animation: water steps(15) 2s infinite; 
    -webkit-animation: water steps(15) 2s infinite; 
    -moz-animation: water steps(15) 2s infinite; 
} 

@keyframes water { 
    0% {background-position: 0 -1120; } 
    100% {background-position: -10035px -1120;} 
} 
@-webkit-keyframes water { 
    0% {background-position: 0 -1120; } 
    100% {background-position: -10035px -1120;} 
} 
@-moz-keyframes water { 
    0% {background-position: 0 -1120; } 
    100% {background-position: -10035px -1120;} 
} 

.sunbutton { 
    position:relative; 
    margin:10px auto; 
    color: white; 
    text-align: center; 
    text-shadow: 0 1px 0 rgba(0,0,0,.5); 
    font-size: .9em; 
    cursor: pointer; 
} 
.sunbutton:after { 
    top: 0px; 
    left: 500px; 
    position: absolute; 
    display: block; 
    padding: 5px 0; 
    width: 125px; 
    border: 1px solid #894603; 
    border-radius: 4px; 
    background: linear-gradient(to bottom,rgba(247,147,30,1) 0%,rgba(216,123,25,1) 44%,rgba(168,94,20,1) 100%); 
    box-shadow: 0px 0px 10px rgba(0,0,0,.6); 
    font-family: 'Duru Sans', sans-serif; 
    content: "SUN ME"; 
} 

.waterbutton { 
    position:relative; 
    margin:10px auto; 
    color: white; 
    text-align: center; 
    text-shadow: 0 1px 0 rgba(0,0,0,.5); 
    font-size: .9em; 
    cursor: pointer; 
} 
.waterbutton:after { 
    top: 0px; 
    left: 275px; 
    position: absolute; 
    display: block; 
    padding: 5px 0; 
    width: 125px; 
    border: 1px solid #63072D; 
    border-radius: 4px; 
    background: linear-gradient(to bottom,rgba(212,20,90,1) 0%,rgba(181,21,86,1) 44%,rgba(140,16,66,1) 100%); 
    box-shadow: 0px 0px 10px rgba(0,0,0,.6); 
    font-family: 'Duru Sans', sans-serif; 
    content: "WATER ME"; 
} 

.foodbutton { 
    position:relative; 
    margin:10px auto; 
    color: white; 
    text-align: center; 
    text-shadow: 0 1px 0 rgba(0,0,0,.5); 
    font-size: .9em; 
    cursor: pointer; 
} 
.foodbutton:after { 
    top: 0px; 
    left: 50px; 
    position: absolute; 
    display: block; 
    padding: 5px 0; 
    width: 125px; 
    border: 1px solid #321559; 
    border-radius: 4px; 
    background: linear-gradient(to bottom,rgba(131,94, 170,1) 0%,rgba(100,76,132,1) 44%,rgba(69,48,96,1) 100%); 
    box-shadow: 0px 0px 10px rgba(0,0,0,.6); 
    font-family: 'Duru Sans', sans-serif; 
    content: "FEED ME"; 
} 

的jsfiddle：http://jsfiddle.net/22Skk/

Answer 1

這是因爲$（本）中的setTimeout點窗口，沒有t到你的按鈕。 更改您的JS這樣：

var bannerImg = $('.bannerimg'); 
$('#sunbutton').click(function() { 
    bannerImg.addClass('suncheck'); 
    setTimeout(function() { bannerImg.removeClass('suncheck'); } 
    , 1000); 
}); 

$('#waterbutton').click(function() { 
    bannerImg.addClass('watercheck'); 
    setTimeout(function() { bannerImg.removeClass('watercheck'); } 
    , 2000); 
}); 

$('#foodbutton').click(function() { 
    bannerImg.addClass('foodcheck'); 
    setTimeout(function() { bannerImg.removeClass('foodcheck'); } 
    , 1000); 
}); 

我已經試過這本地計算機上並能正常工作。 jsFiddle：http://jsfiddle.net/D7rD6/