Jquery fadeIn 아코디언 메뉴의 텍스트

아코디언 메뉴에서 텍스트가 페이드 인되는 방법에 대한 약간의 도움을 찾고 있습니다. 좀 더 구체적으로, 메뉴 항목을 클릭하면 아래에 표시되는 텍스트가 희미 해지고 메뉴가 닫히면 사라집니다. Jquery를 처음 접했고 기본 개념을 이해할 수 있지만 현재 코드를 제자리에서 사용할 수는 없습니다.Jquery fadeIn 아코디언 메뉴의 텍스트

예 : 어떤 도움을 크게 감상 할 수 http://codepen.io/Sektion66/pen/ouclt

! 감사.

출처

2013-05-16 Sektion66

예를 직접 연결하고 누군가가 자신의 코드를 파악하기를 바라지 만 도움이 필요한 코드 영역을 게시 할 수 있다면 더 나은 응답을 얻을 수 있습니다. –

글쎄 솔루션을 발견하고 내 자신의 질문에 대답하려고 시도했지만 게시하지 않았다. 오늘 나중에 다시 게시 할 시간을 알게 될 것입니다. 고마워. – Sektion66

CSS와 Jquery를 함께 사용하여 원래의 문제를 해결할 수있었습니다.

문제는 ... 그래픽 요소가 콘텐츠 영역 외부에 매달려있는 것처럼 아코디언을 애니메이션화하는 동안 가시성을 강제해야했습니다. 이렇게하면 주요 텍스트 요소가 애니메이션 중에이 영역 외부에 표시됩니다. 엉성한 표정을 짓는다.

수정 사항 CSS 사용하기 기본 텍스트 영역의 주요 불투명도를 처음에 0으로 설정 한 다음 메뉴 항목을 클릭하면 텍스트가 희미 해지는 CSS 클래스가 추가되고 클릭하면 해제됩니다. 사라지다. 거기에

그래서 가장 기본적인 형태입니다 :

CSS

.initialState { 
    opacity: 0; 
    transition: opacity 0.15s ease-in-out; 
} 

.fadeIn { 
    opacity: 1; 
    transition: opacity 1s ease-in-out; 
}

.slideDown().addClass("fadeIn"); 
.slideUp().removeClass("fadeIn");

예 : http://codepen.io/Sektion66/pen/ouclt

타 모든 사람들을위한 nks. 다행히도이 아코디언 메뉴는 다른 사람들에게도 유용 할 것입니다.

출처

2013-05-17 21:17:37 Sektion66

$allCells.slide(Up|Down)을 $allCells.fade(In|Out)으로 바꿉니다. 이제 큰 선택기를 사용하기 때문에 다른 문제가 발생합니다. 그것을 피하십시오.

출처

2013-05-16 23:18:47 Roger

컨트롤에 activate(event, ui)event에 연결해야합니다.

아래 코드 샘플과 같은 처리기를 만들고 전체 패널을 페이드 인 할 수 있는지 먼저 확인하십시오. 이것은 내가 테스트 해 보지 못한 이상한 결과를 줄 수 있습니다. 단지 시작해야 할 곳을 제안하십시오.

$(".selector").accordion({ 
    activate: function(event, ui) { ui.newPanel.fadeIn(); } 
});

그것은 당신의 레이아웃이나 당신이 newPanel 개체 내부의 텍스트 요소에 대한 참조를 가져 명시 적으로 모두 퇴색 할 필요가 다음 렌더링 놨어요합니다.

출처

2013-05-16 23:20:20

그는 아코디언 플러그인을 사용하고 있습니까? – Roger

Jquery fadeIn 아코디언 메뉴의 텍스트

답변

관련 문제