CODEWITHSUNDEEP
jquery
Ando
Ando

Reputation: 1827

jQuery change image back and forth

I have the following 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>

Then i change the image on click and after my ajax's success as follows

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

What I want to do is have a delay after the changeImage and put back the old image like so:

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

But for some reason that does not work. Could you give a suggestion how to fix it?

Upvotes: 0

Views: 479

Answers (2)

Matt Coughlin
Matt Coughlin

Reputation: 18906

delay is a jQuery function not a standard JavaScript function.

$().delay()

Edit:

After searching around, I found an obscure way to achieve this using the delay function (shown below). But you're probably far better off using setTimeout as suggested by others.

// 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');

Upvotes: 0

adeneo
adeneo

Reputation: 318182

Your function is neither chainable nor a jQuery animation, which is the only thing delay() works on (anything in the .fx queue to be more precise), try something like this :

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

Upvotes: 3

Related Questions