如何使用不同的按钮为不同的精灵设置动画？ （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中的$（this）指向窗口，而不是指向按钮。 将你的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/