Question

I want to switch images on .click() using the url attr I can do so, but I can’t figure out how to make it wait, until the animation is done to redirect to the new webpage.
Here’s the js

$(function() {
    $('.cv').click(function() {
        $("#cv img").fadeOut(2000, function() {
            $(this).load(function() {
                $(this).fadeIn();
            });
            $(this).attr("src", "images/cv2.png");
            return true;
        });
    });
}); 

Here’s the html:

<div id="cv" class="img one-third column">
  <a class="cv" target="#" href="cv.joanlascano.com.ar">
  <img src="images/cv1.png" alt="Curriculum"/>
  <br />CV</a>
</div>

Answer 1

You need to prevent the browser default of following link by returning false from click handler. Then do redirect in callback of fadeIn()

$(function() {
    $('.cv').click(function() {
        /* store url*/
        var href = this.href;
        $("#cv img").fadeOut(2000, function() {
            /* bind load to image*/
            $(this).load(function() {
                $(this).fadeIn(function() {
                    /* redirect in callback of fadeIN*/
                    window.location = href;
                });
                /* change src*/
            }).attr("src", "images/cv2.png");
        });
        /* prevent browser default following href*/
        return false;
    });
});