jQuery fadeToggle - 가시성을 올바르게 설정하지 않았습니다.

Question

jQuery 토글 질문이 있습니다. 다음 코드는 정상적으로 작동합니다.

// unhide the more when clicked 
$(".more").click(function() { 
    $(this).next(".moreDetails").toggle(); 
    // check state of the toggle 
    if ($(this).next(".moreDetails").is(":visible")) { 
     $(this).html('Show Less Details ... <img src="images/smallarrowup.png" />'); 
    } else { 
     $(this).html('Show More Details ... <img src="images/smallarrowdown.png" />'); 
    } 
}) 

누군가가 .moreDetails DIV를 전환 한 후 .MORE DIV 내에서 HTML을 변경하는 .more 클래스 DIV를 클릭합니다. 그것은 .moreDetailsDIV를 토글 할 때 작동하기 때문에 작동합니다 .moreDetails : visible, 그리고 그 반대로, 다시 토글 될 때 .more 어딘가에 설정해야합니다. 자세히 : hidden.

이것은 모두 훌륭하지만 토글은 표시/숨기기 효과입니다. 좋은 페이드 효과를 원합니다. 하지만 최대한 빨리

$(this).next(".moreDetails").fadeToggle(); 

에

$(this).next(".moreDetails").toggle(); 

변경으로 바꿈. 각 모서리에서 .more의 가시성을 전환하는 것처럼 보이지 않습니다 .Details DIV는 DOM에서 볼 수 없더라도 항상 true입니다.

아이디어가 있으십니까? 감사합니다

Answer 1

페이드 인/아웃 효과를 완료하기 전에 :visibility을 확인했기 때문입니다.

이 시도 :/다른 fadeToggle 기능

// unhide the more when clicked 
$(".more").click(function() { 
    var $this = $(this); 
    $(this).next(".moreDetails").fadeToggle("fast", function() { 
    if ($(this).is(":visible")) { 
     $this.html('Show Less Details ... <img src="images/smallarrowup.png" />'); 
    } else { 
     $this.html('Show More Details ... <img src="images/smallarrowdown.png" />'); 
    } 
    }); 
}); 

안에 당신은 요구 사항에 따라 "slow"/"fast"를 사용할 수 있는지 넣어.

fadeToggle에 대한 자세한 내용은 here을 클릭하십시오.