javascript - jQuery用动画改变图像并等待它触发超链接

Question

我想使用 url attr 在 .click() 上切换图像，但我不知道如何让它等待，直到动画完成以重定向到新网页。这是js

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

这是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

false您需要通过单击处理程序返回来防止浏览器默认跟随链接。然后在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;
    });
});

Answer 2

$('.cv').click(function(e) {
    e.preventDefault();  // prevent browser reload
    $("#cv img").fadeOut(2000, function() {  // fadeout the image
         $(this)
              .attr('src',  "images/cv2.png")  // change src of image
              .load(function() {  // load image
                 $(this).fadeIn(); // display the image
             });
    });
});