Jquery .slideup 함수가 div를 숨기지 않습니다

Question

"map"div를 표시하거나 숨기려면 아래 코드를 사용하고 있습니다. id가 'goo'인 링크를 클릭하면 .slideDown을 사용하여지도가 표시되지만 링크를 다시 클릭하면지도를 숨기려면 .slideUp을 사용하는 것이 SUPPOSE이지만 아무 일도 일어나지 않습니다. 여기

는 자바 스크립트입니다 : 사람이 사업부가 밀어하지 않습니다 어떤 생각이있는 경우

$('#goo').live('click',function() { 
    if ($("#map").css('visibility','hidden')){ 
    $('#map').slideDown('slow'); 
    $("#map").css('visibility','visible'); 
    $("#map").css('position','relative'); 
    } else { 
    $('#map').slideUp('slow'); 
    } 
    return false; 
    }); 

은 알려주세요!

Answer 1

당신의 상태를 변경해야하는 경우 ... 그 밖의 다른 모든 좋은 .... 당신은 다른

if($("#map").css('visibility') == 'visible') 

그것의 좋은

확인해야

동일한 것을위한 바이올린을 확인하십시오 http://jsfiddle.net/xsFRJ/

Answer 2

jQuery의 .slideUp() 및 .slideDown() 함수는 CSS visibility 속성에 영향을주지 않습니다. 사용하려고하는 기능을보다 잘 준수하려면 visibility: hidden 대신 display: none;을 사용해야합니다. 그때 opacity: 0;를 사용하고 요소의 불투명도 애니메이션을 제안 http://jsfiddle.net/jasper/2QWEM/1/

은 당신이 당신의 요소는 여전히 테이크 업 할 공간이 눈에 보이지 않는있는 동안 원하는 경우 :

$('#goo').live('click',function() { 
    if ($("#map").css('opacity') == 0){ 
    $('#map').animate({opacity : 1}, 500); 
    } else { 
    $('#map').animate({opacity : 0}, 500); 
    } 
    return false; 
    }); 

을 여기

는 display: none;를 사용하는 jsfiddle입니다 .slideUp()에 대한

문서 : 사이드 노트에 http://api.jquery.com/slideup

, 같은 셀렉터 많은 사용 시간을 오버 할 수 있습니다 체인 함수 호출 선택기를 캐시하여 성능을 향상 시키십시오. 여기에 코드를 사용하는 예는 다음과 같습니다 ...

$('#goo').live('click',function() { 
    var $map = $('#map'); 
    if ($map.css('visibility','hidden')){ 
     $map.slideDown('slow').css({ 
      visibility : 'visible', 
      position : 'relative' 
     } 
    } else { 
     $map.slideUp('slow'); 
    } 
    return false; 
}); 

Answer 3

사용 slideToggle 작동하지 않는 이유 귀하의 질문에 대답하는 방법

$('#goo').live('click',function() { 
    $('#map').slideToggle('slow'); 
    return false; 
});