jquery click for css image based hover？

Question

我有一个页面，其中.button 将用作虚拟按钮。单击后，它将移动背景图像以执行“悬停动画”。

但是我得到的代码似乎不想做任何事情，并且没有列出任何错误。

    $(".button").click(function(){
        $(this).css('backgroundPosition', '-468px 0').delay(200).css('background-position', '0 0');
    });

我也试过

    $(".button").each(function(){
        $(this).click(function(){
            $(this).css('backgroundPosition', '-468px 0').delay(200).css('background-position', '0 0');
        });
    });

也试过了

    $(".button").each(function(){
        $(this).click(function(){
            $(this).stop().animate({backgroundPosition: "-468px 0"}, 100);
        });
    });

CSS

.button {
    color: #4e5645;
    font-family: 'Roboto', sans-serif;
    text-shadow: 0px 0px 1px #b3c799;
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    height: 120px;
    width: 468px;
    line-height: 120px;
    background: url(button_hover.png) no-repeat;
    cursor: pointer;    
}

HTML

            <div class="buttonc">
                <div class="button">TAX PEOPLE</div>
            </div>

有什么想法吗？是的，jQuery 核心已正确链接并用于其他功能。

编辑：作为以下解决方案的替代方案，我今天在自己的写作中偶然发现了这一点……有趣的是，我昨晚没想到悬停按钮。哇。

    $(".rightctext").click(function(){
        var div = $(this);
        div.css('text-shadow', '0px 0px 20px #fbf5df');
        setTimeout(function(){
            div.css('text-shadow', '0px 0px 10px #474333');
        }, 200);
    });

Answer 1

延迟仅对动画有效，.css 立即更改。相反，您可以使用动画完成后执行的animate 回调函数。我想这就是你所追求的：

$(".button").click(function(){
     $(this).animate({'background-position-x': '-468px'},200, function(){
         $(this).animate({'background-position-x': '0px'},200);
     });   
 });

编辑： 没有动画：

 $(".button").click(function(){
     $(this).animate({'background-position-x': '-468px'},0).delay(200).animate(
         {'background-position-x': '0px'},0);   
 });

乔丹编辑：

我偶然发现的替代方法，好像我昨晚从未遇到过这个问题......想知道睡眠可以做什么。再次感谢大家的帮助。

    $(".button").click(function(){
        var div = $(this);
        div.css('background-position-x', '-468px');
        var end = setTimeout(function(){
            div.css('background-position-x', '0px');
            clearTimeout(end);
        }, 200);
    });

Answer 2

你忘了输入“px”。

$(this).css('background-position', '-468px 0px').delay(200).css('background-position', '0px 0px');