1

url attrを使用して.click（）で画像を切り替えたいのですが、アニメーションが完了して新しいWebページにリダイレクトされるまで、画像を待機させる方法がわかりません。これが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>
4

2 に答える 2

3

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;
    });
});
于 2012-06-23T03:25:31.620 に答える
1 
$('.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
             });
    });
});
于 2012-06-23T03:22:08.813 に答える