jQuery 슬라이드가 처음에 활성화되었습니다.

Question

이미지를 클릭하면 jQuery 슬라이드를 사용하여보기에서 사라지는 캡션이 있습니다.

캡션 "슬라이드"토글을 처음에는 활성화 (숨김)로 설정하고 이미지를 클릭 한 후 오른쪽 (아래쪽이 아님)에서 슬라이드를 표시하려고합니다. 도와 줘서 고마워!

jQuery를 :

$("#slideshow").click(function() { 
     $(".flex-caption").toggle("slide"); 
    }); 

JSFiddle! 당신이에 캡션에 절대 높이를 설정하려고하는 것입니다 치즈의 종류 중요 할 수 http://jsfiddle.net/tyuth1sr/1/

Answer 1

.flex-caption { 
    ... 
    padding-bottom: 100%; 
    top: 0px; 
    display: none; 
} 

Demo

Answer 2

하나의 방법. 그런 식으로 jQuery 슬라이드 함수가 높이를 바꿀 수 없으므로 오른쪽에서 오는 것처럼 보입니다.

는

http://jsfiddle.net/tyuth1sr/11/ 내가 주위에 몇 가지 클래스를 변경했다 참조하고, 높이가 IMO 대응하기 어려울 것입니다.

.bottom { 
    bottom: 0; 
    margin-bottom: 0px; 
    position:absolute; 
} 

.flex-caption { 
    position: absolute; 
    text-align: left; 
    background:rgba(255, 255, 255, 0.7); 
    z-index: 1; 
    padding: 20px; 
    width: 295px; 
    padding-top: 100%; 
    bottom: 20px; 
    right:0; 
    height:650px !important; /* should be set to height of container - 40 for padding */ 
} 

<div class="flex-caption "> 
    <div class="caption-content bottom"> 
     <p>Taectur sinti consed magnimp oreptatem que est essi cuptus doluptate pratis rero omni con fugitatius venienimus. Xim fuga. Iliqui omnim comnimus estiorrum cum et accus et liquia nos.</p> 
    </div> 
</div> 

당신은 부모 (.flex 슬라이더) 상자 크기 조정 줄 수 있습니다 : 여기에 내가 변경 한 코드 경계 - 상자가; 플렉스 캡션의 높이를 100 %로하십시오!