CSS 클래스로 jQuery 슬라이드를 열고 닫는 방법

Question

내 CSS 스타일링 배경과 텍스트를 jQuery 액션으로 부드럽게 밀어 넣을 수있는 방법은 무엇입니까? 다시 닫으려면 다시 클릭하면 배경색이 사라지고 텍스트가 위로 올라갑니다. 나는 배경을 머무르고 텍스트로 슬라이드하기를 원해.

나는 또 다른 동작을 클릭 할 때 하나의 동작을 종료하는 방법을 알아 내려고하고있다. 내 코드는 here입니다.

Answer 1

이 코드 줄에서 완전히 분명 아니지만 :

$(this).siblings().slideToggle('slow').parent().toggleClass('expanded'); 

slideToggle 기능은 실제로 비동기 방식으로 실행하는 것입니다. 즉, 애니메이션이 완료되기 전에 toggleClass이 실행될 가능성이 큽니다. jQuery docs for slideToggle에서 읽으면 옵션 매개 변수로 callback 함수를 사용할 수 있습니다. 애니메이션이 완료된 후 코드가 실행되도록하려면 언제든지 콜백을 사용하십시오. 그런

var _this = this; // because this will point to a different object inside the callback 
$(this).siblings().slideToggle('slow', function() { 
    $(_this).parent().toggleClass('expanded'); 
}); 

또는 뭔가 예를 들면 다음과 같습니다. 당신이 찾고있는 최종 결과가 즉시 명백하지 않습니다. 그러나 희망적으로 이것은 당신의 방법에 당신을 도울 것입니다. 배경 문제에 대한

Answer 2

:

보십시오 당신이 그들의 배경 색상을 유지하고자하는 컨테이너 박스 타입의 CSS 속성을 추가;

<div style="float: left; position: relative; width: 320px; height: 240px; margin: 10px; background: #ff0000;"> 
    <p>Content</p> 
    <br style="clear: both;" /> 
</div> 

플로트에 관계없이 아무것도의 폭과 배경 색상을 적용합니다

// I.e., 
box-sizing: border-box 
// @see https://developer.mozilla.org/en-US/docs/CSS/box-sizing 

그리고 그 내에서의 플로트 요소를 부유하고 삭제하려고 작동하지 않는 경우

. 다음 링크에서 스크립트를 살펴 보자 :

그리고 가까운 다음 액션 열기 전에 당신의 행동으로

. 내가 몇 년 전에 쓴 스크립트입니다하지만 당신이 원하는 무엇을위한 기본 프레임 워크의 생각이있다 :

http://abi.edu/js/resources-page.js

이 토글 정보 항목이 모든 정보 항목을 숨기고 전달 된 id를 가진 하나를 보여줍니다; 즉, 각 링크에 대해 클릭 한 번으로 모두 숨기기를 클릭합니다.

또한 약 년 전에서 다른 청소기 예 : 왼쪽 열에서 http://abitribeca.com/index/about

클릭 링크는 컨텐츠 영역의 변화를 볼 수 있습니다.

이 마지막 예 @note

http://elycruz.com/portfolio

내가 PHP를 백엔드에서 JSON을 처리하는 방법에 배우는로 조금 지저분 :

또한 당신은 또한 같은 더 복잡한 일을 할 수있는이 간단한 예입니다 기억 (비록 좋은 예입니다).