2010-03-12 4 views
0

이 스크립트를 블라인드 효과로 사용하도록 변경할 수 있습니까?블라인드 효과 켜기/끄기

// Andy Langton's show/hide/mini-accordion - updated 23/11/2009 
// Latest version @ http://andylangton.co.uk/jquery-show-hide 

// this tells jquery to run the function below once the DOM is ready 
$(document).ready(function() { 

// choose text for the show/hide link - can contain HTML (e.g. an image) 
var showText=''; 
var hideText=''; 

// initialise the visibility check 
var is_visible = false; 

// append show/hide links to the element directly preceding the element with a class of "toggle" 
$('.toggle').prev().append(' <a href="#" class="toggleLink">'+showText+'</a>'); 

// hide all of the elements with a class of 'toggle' 
$('.toggle').hide(); 

// capture clicks on the toggle links 
$('a.toggleLink').click(function() { 

// switch visibility 
is_visible = !is_visible; 

// toggle the display - uncomment the next line for a basic "accordion" style 
//$('.toggle').hide();$('a.toggleLink').html(showText); 
$(this).parent().next('.toggle').toggle('slow'); 

// return false so any link destination is not followed 
return false; 

}); 
}); 

FYI- 
Where it says: 
var showText=''; 
var hideText=''; 

It was originally: 
var showText='Show'; 
var hideText='Hide'; 

다른 텍스트 영역에 링크를 적용하고 있기 때문에 텍스트 표시/숨기기를 삭제했습니다. Blind 효과와 Toggle 효과가 맘에 들며 가능한 경우 적용 방법을 알아야합니다. 단추 나 정적 텍스트 대신 모든 텍스트에 대한 링크를 적용 할 수있는 기본 블라인드 효과 스크립트를 찾을 수 없습니다.

감사합니다. 당신이 도울 수 있기를 바랍니다! 트레이시

답변

1

나는 그것을 알아 낸 것 같았다! 다음 줄에 한 단어를 변경하여 :

: 나는 또한 완전히 불필요한 라인 삭제
.toggle

.slideToggle에 :

$(this).parent().next('.toggle').toggle('slow'); 

이 변경됨 :

$(this).parent().next('.toggle').slideToggle('slow'); 

은 간단하게 변경

var showText=''; 
var hideText=''; 

원래 말했다 어떤 :

var showText='Show'; 
var hideText='Hide'; 

나는 다양한 텍스트에 숨겨진 DIV를 활성화 할 수있는 링크를 적용하고 싶었 기 때문에. 내가 그림 후 : [인/아웃 좌/상단 모서리에서 들어오는/최대 대 아래로 직선 슬라이드]이 슬라이딩 효과를 만들어 가기

$('.toggle').prev().append(' <a href="#" class="toggleLink">'+showText+'</a>'); 

:

또한이와 관련된 다른 라인을 삭제 속임수를 썼는지 .toggle .slideToggle에 변경, 내가 행을 대체 것을 읽을 수 있습니다 :

$(this).parent().next('.toggle').animate({"height": "toggle"},{duration: 1000}); 

대신 :

이제 부드럽게 움직이는 속도를 제어 할 수있게되었습니다.

HTML의 경우 href = "#"인 링크에 "toggleLink"클래스를 적용하기 만하면됩니다. 숨겨진 DIV의 경우 "토글 (toggle)"클래스를 적용합니다.