javascript - How do I animate different sprites with different buttons? (HTML/CSS) -

i've been trying animate sprite using different onclick button triggers. 1 of buttons works in fiddle. on file version other buttons works work once , not reset. (as in buttons play, in order , can't press on them again) assumed removeclass remove after amount of time return original state can click button , repeat animation start.

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/

it's because $(this) in settimeout points window, not button. change js this:

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 ); } ); 

i've tried on local computer , works fine. jsfiddle: http://jsfiddle.net/d7rd6/