첫 번째 클릭 만 클릭하면 애니메이션이 구현됩니까?

Question

rel="<img src"#"/>" 인 앵커 태그가 여러 개 있습니다.

<a></a>을 클릭하면 다른 div에 큰 이미지가 표시되고 rel 값은 fadeIn 효과를 사용합니다. 내가 원하는 무엇

는 큰 이미지는 앵커의 rel 같은 src이 있는지 확인하고 fadeIn 효과 그렇다면 방지합니다.

$(document).ready(function() { 

    $("a.largeimg").click(function() { 
    var image = $(this).attr("rel");   
    $('.main-product-image').html('<img src="' + image + '"/>'); 
    $('.main-product-image img').hide(); 
    $('.main-product-image img').fadeIn(); 
    return false; 

    if(src == image) { 

     $('.main-product-image img').show(); 

    } 

    }); 

Answer 1

앵커의 REL 및 이미지의 SRC가 동일하고 있는지 확인할 수 있도록 지금과 같은 코드에서 페이드, 전 기능을 탈출하는 경우 : 이해하면

var src = $('.main-product-image img').attr("src"); 
if (src == image) return false; 

Answer 2

당신은 이미지의 src이 클릭 된 요소의 rel 속성과 같은지 확인해야하므로 애니메이션 전에 올바르게 질문해야합니다.

JQUERY

$(document).ready(function() { 

    // use bind when targeting many elements 
    $("a.largeimg").bind("click", function() { 

    var $target = $('.main-product-image'),   // target element 
     src  = $target.find('img').attr("src"), // src from existent image 
     image = $(this).attr("rel");    // rel from clicked element 

    // if src different from image 
    if (src != image) { 
     $target.html('<img src="' + image + '"/>'); // append new image 
     $target.find('img').hide().fadeIn();   // perform the animation 
    } 

    // prevent the browser from continuing to bubble the clicked element 
    return false; 
    }); 
}); 

시 :

테스트,하지만 잘 작동해야하지!