사이드 바가 jquery 애니메이션을 사용하여 펼치면 div 자동 할당

Question

이 웹 사이트에서 사용되는 효과를 얻으려는 시도 인 http://www.qvivo.com/. jquery 잘 작동하고, 내 문제는 왼쪽 된 패널/세로 막대를 확장 할 때 주 콘텐츠를 자동으로 조정하는 방법입니다. 얘들 아 좀 도와 줘. 미리 감사드립니다.

Answer 1

Liam from QVIVO 여기에. 사이트의 틀을 모방하기 위해 jsFiddle (http://jsfiddle.net/fZy6z/)을 작성했습니다.

나의 주요 충고는 브라우저가 당신을 위해 대부분의 일을하도록 노력하는 것이다. JQuery로 애니메이션을 적용하는 대신 CSS 전환을 사용하여 클래스 태그를 추가하거나 제거했습니다. 처음에는 이점을 볼 수 없지만 복잡한 DOM 트리로 오른쪽 패널을 채우기 시작할 때는 하드웨어 가속 전환을 통해 원활하게 애니메이션을 적용하는 유일한 방법을 찾을 수 있습니다.

주요 콘텐츠의 자동 크기 조정 문제는 매우 간단합니다. 포함 된 div의 너비 값을 선언하지 마십시오. 어쨌든 자동 너비로 페이지가 확장됩니다. 이 div 내의 콘텐츠에는 너비 값인 100 %를 부여 할 수 있습니다.

건배, 리암

Answer 2

나는 JQuery와 함께 최고의 아니다, 그래서 자바 스크립트와 그것을 조금 섞는다.

원하는 너비의 너비 %로 게임해야합니다.

CSS에서 먼저 passes_button 클래스를 넣었습니다. Absoute를 넣었습니다. 또한 내가 플로트 내가 JS에 더 나은 생각으로 내 자바 스크립트의 일부, 나는 애니메이션이 방법

var content = document.getElementsByClassName("content"); 
$('.panel_button').click(function() 
{ 
    $(".panel").animate({width:'toggle'},500); 

    if(content[0].style.width=="70%"){ 
     $(".content").animate({width:"90%"},500); 
      $(".panel_button").animate({left:"0%"},500); 
    } 
    else{ $(".content").animate({width:"70%"},500); 
      $(".panel_button").animate({left:"29%"},500); 
      } 
}); 

를 만든 당신의 jQuery의 ands에 대한 다음

.panel_button{ 
    height: 50px; 
    width: 50px; 
    cursor: pointer; 
    background-image: url(images/arrow.png); 
    background-position: center center; 
    background-repeat: no-repeat; 
    border: thin solid #CCC; 
    margin-left: -1px; 
    top: 200px; 
    position:absolute; 
} 

를 왼쪽으로 제거하지만, 마찬가지로 내가 말했듯이, 당신은 것입니다 Width와 positon을 가지고 놀 필요가 있습니다. 또한 공중 선회를 위해 떠있는 부유물을 제거하십시오.