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

乔丹编辑:

另一种方法我偶然发现的，好像我昨晚从来没有遇到过这个问题......想知道 sleep 有什么用。再次感谢大家的帮助。

    $(".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);
    });