jQuery (및 아마도 CSS)를 사용하여 붕괴 및 애니메이션없이 요소를 숨기는 방법은 무엇입니까? 다음

Question

테이블 페이지에서이 아래에있다

<span class="lastSave" name="lastSave">Last Saved by <i name="lastSavedBy"></i> at <i name="lastSaved"></i> </span> 

숨겨집니다 원하는 범위이다.

다음은 일부 이벤트에서 호출되는 javascript의 관련 함수입니다. 이 경우 테이블이 위로 올라 가게됩니다.

function hideLastSaved(form){ 
    jQuery(' [name="lastSave"]').hide(); 
} 

function showLastSaved(form){ 
    jQuery(' [name="lastSave"]').show(); 
} 

위의 자바 스크립트 스 니펫 대신 다음을 시도해 보았습니다. 이것은 테이블을 위로 움직이지 않습니다. 하지만이 응용 프로그램에는 원하지 않는 어떤 종류의 페이드 아웃이 있습니다.

function hideLastSaved(form){ 
    jQuery(' [name="lastSave"]').animate({opacity:0}); 
} 

function showLastSaved(form){ 
    jQuery(' [name="lastSave"]').animate({opacity:100}); 
} 

Answer 1

숨기는 방법은 none로 소자의 display 속성을 변경한다.

요소를 숨기는 동안 요소 위치를 유지하려면 visibility을 hidden으로 설정하는 클래스를 추가하십시오.

CSS :

.hider{ 
    visibility:hidden; 
} 

JS

function hideLastSaved(form){ 
    $(' [name="lastSave"]').addClass('hider'); 
} 

function showLastSaved(form){ 
    $(' [name="lastSave"]').removeClass('hider'); 
} 

여기에 아주 기본적인 데모입니다 : http://jsfiddle.net/dWw7F/

Answer 2

는 CSS를 볼 속성을 changinging보십시오.

$('#uniqueSpanId').animate({opacity: 0.0}); 

이 uniqueSpanId 0으로 보이지 않는 만들기와 스팬의 불투명도를 변경합니다 :

Answer 3

function hideLastSaved(){ 
    jQuery(' [name="lastSave"]').css('opacity','0'); 
} 

function showLastSaved(){ 
    jQuery(' [name="lastSave"]').css('opacity','1'); 
} 

Answer 4

는 span의 가시성을 변경하려면 다음 코드를 사용합니다. 간단한 대향 명령을하고 다시 그 행을 변경 :

$('#uniqueSpanId').animate({opacity: 1.0}); 

Answer 5

다른 방법 : = 전이

jQuery show()와 display: none 및 visibility: hidden 설정 display: block 및 visibility: visible 설정

function hideLastSaved(form){ 
    jQuery(' [name="lastSave"]').css('display','none'); 
} 

function showLastSaved(form){ 
    jQuery(' [name="lastSave"]').css('display','block'); 
} 

jQuery hide()

= 전환과 함께

Answer 6

그럼 나는 그 밖의 모든 것을 원했어. .animate() 및 불투명도를 변경할 수 있도록 jQuery를에 .hide()이가 CSS 또한

.hide{ 
display: none 
} 

에 다음 클래스를 추가하는 것과 동일하기 때문에 작동하지 않았다, 그래서 자리를 유지하기 위해, 나는 애니메이션의 어떤 형태를 원하지 않았다 0에서 1까지는 내가 찾고있는 것이 아닙니다. 나는 그것을 시도하고 그 요소가 희미 해지는 것을 볼 수있다. 나는 페이지 이동에서 다른 모든 것들없이 즉시 사라지기를 원한다.요소에

.hider{ 
visibility: hidden 
} 

사용 :

제가 이와 같은 클래스를 추가하는 짧은 방법 (propertyName 형식, 값) 인

function hideLastSaved(form){ 
    jQuery(' [name="lastSave"]').css('visibility','hidden'); 
} 

function showLastSaved(form){ 
    jQuery(' [name="lastSave"]').css('visibility','visible'); 
} 

.CSS를 사용하기로 결정

function hideLastSaved(form){ 
    $(' [name="lastSave"]').addClass('hider'); 
} 

function showLastSaved(form){ 
    $(' [name="lastSave"]').removeClass('hider'); 
} 

Jamie Dixon이 제안한 것과 비슷합니다. 내가 Nightw0rk이 시사하는 어떤 시도하지 않은

:

이

function hideLastSaved(){ 
    jQuery(' [name="lastSave"]').css('opacity','0'); 
} 

function showLastSaved(){ 
    jQuery(' [name="lastSave"]').css('opacity','1'); 
} 

그러나 그것을 시도 할 것이다은 너무 나는 그것이처럼 보이는 방법을 알고있다.

귀하의 훌륭한 제안에 감사드립니다.

Answer 7

당신은 다음 사용 JQuery와의 이전 버전을 사용하는 경우 : 당신의 최신 버전을 사용하는 경우

function hideLastSaved(form){ 
jQuery(' [name="lastSave"]').fadeOut(1); 
} 

function showLastSaved(form){ 
jQuery(' [name="lastSave"]').fadeIn(1); 
} 

는 "1"단순히 기술적으로 아무것도 1 밀리 세컨드의 시간 규모를 설정하고 JQuery와는 단지 JQuery와 대신 $를 추가

function hideLastSaved(form){ 
$('[name="lastSave"]').fadeOut(1); 
} 

function showLastSaved(form){ 
$('[name="lastSave"]').fadeIn(1); 
}