jquery - jQuery来回改变图像

Question

我有以下html

 <img id="voteImgBtn" onclick='editInstr(1);' src="http://site.com/sync.png" width="99" height="99" border="0"  />
                    <script type="text/javascript">
                        function changeImage(a) {
                            document.getElementById("voteImgBtn").src=a;
                        }
                    </script>

然后我在点击和我的ajax成功后更改图像如下

 success: function(data){
           changeImage( "http://site.com/syncD.png" );
        }

我想要做的是在changeImage之后有一个延迟并像这样放回旧图像：

 success: function(data){
           changeImage( "http://site.com/syncD.png" );
           delay(500).changeImage( "http://site.com/sync.png" );
        }

但由于某种原因，这不起作用。你能提出如何解决它的建议吗？

Answer 1

您的函数既不是可链接的也不是 jQuery 动画，这是唯一delay()有效的（更准确地说是 .fx 队列中的任何内容），请尝试以下操作：

success: function(data){
    changeImage( "http://site.com/syncD.png" );
    setTimeout(function() {
        changeImage( "http://site.com/sync.png" );
    }, 500);
}

Answer 2

delay是一个 jQuery 函数而不是一个标准的 JavaScript 函数。

$().delay()

编辑：

在四处搜索之后，我发现了一种使用该函数实现此目的的晦涩方法delay（如下所示）。setTimeout但是按照其他人的建议使用可能会好得多。

// Queue it in the fx queue
$(document).delay(500).queue(function(){ 
    changeImage( "http://site.com/sync.png" );
    $(this).dequeue(); 
});

// Queue it in a custom queue
$(document).delay(500, 'myQueue').queue('myQueue', function(){
    alert('hello');
}).dequeue('myQueue');