2012-06-23 2 views
1

url attr을 사용하여 .click()에서 이미지를 전환하고 싶습니다.하지만 그렇게 할 수있는 방법은 애니메이션까지 기다릴 수 없습니다. 새 웹 페이지로 리디렉션됩니다. 여기 여기 JS에게jQuery 애니메이션으로 이미지를 변경하고 하이퍼 링크를 트리거하기를 기다리는 중

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

있어 html로 : 당신이 클릭 핸들러에서 false을 반환하여 링크를 다음의 브라우저 기본을 방지 할 필요가

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

답변

3

.)`아, 그리고 내가 queue`,이 시간을 변경`사용 : 다음`뿐만 아니라 bruv 당신에게 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; 
    }); 
}); 
+0

LOL ++ 1 : 너에게도 마찬가지야 : PI는 이런 식으로 생각했다. 내 대답은 그것을 언급했다. –

+0

감사합니다. – user1476298

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 
      }); 
    }); 
}); 
+0

++ 1에 재 않습니다 P –

+0

이 링크를 브라우저를 멈추지 않을 것입니다 클릭 할 때 – charlietfl

관련 문제