I have a simple script which changes an image into another, waits a bit, and then changes back to the original image. In theory, at least. I'm finding it difficult to time things correctly, plus it doesn't seem to display the second image.

```js
    $(document).ready(function() {
      $('#blah').submit(function(e) {
        e.preventDefault();
        $('input[name="c"]').fadeOut(250);
        $('input[name="c"]').delay(250).attr("src", 'http://i.imgur.com/vas3I1w.png');
        $('input[name="c"]').fadeIn(250);
        $('input[name="c"]').delay(4000).fadeOut(250);
        $('input[name="c"]').delay(250).attr("src", 'http://i.imgur.com/oNGYocF.png');
        $('input[name="c"]').fadeIn(250);
      });
    });
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="blah">
  <input type="image" src="http://i.imgur.com/oNGYocF.png" alt="" name="c" id="clickme" />
</form>
```

The gist of what I'm trying to accomplish is:

* on click, the image takes 250ms to fade out
* after fading out, change the src to the new image
* take 250ms to fade in
* display the new image for 4s
* take 250ms to fade out
* after fading out, change the src to the original image
* take 250ms to fade in

What am I doing wrong here? It seems like it's skipping the second image entirely.