애니메이션으로 div를 확장하십시오

StackOverflow https://stackoverflow.com/questions/687284

  •  22-08-2019
  •  | 
  •  

문제

Ajax 호출에서 콘텐츠를받는 DIV가 있습니다. 지금은 Ajax 콜백 처리기 에서이 작업을 수행하고 있습니다.

function searchCallback(html) { $("#divSearchResults").html(html); }

이렇게하면 콘텐츠가 페이지에 "팝"을 만들고 매우 갑작 스럽습니다. .slidetoggle () 메소드와 같이 div가 우아하게 크기를 조정할 수있는 방법이 있습니까?

도움이 되었습니까?

해결책

당신은 그것을 처음 숨길 수 있습니다. 그런 다음 HTML을 삽입하고 해당 기능이 완료되면 표시 효과를 수행하십시오. (당신의 slidetoggle처럼)

다른 팁

숨겨져 있는지 확인한 다음 내용을 추가하고 밀어 넣으십시오.

$("#divSearchResults").hide();
$("#divSearchResults").html(html);
$("#divSearchResults").slideDown();

또는 당신은 그것을 퇴색시킬 수 있습니다 :

$("#divSearchResults").fadeIn();

컨텐츠가 나타날 때 페이지가 "폭발"되지 않도록하려면 DIV가 숨겨져 있는지 확인하십시오. 또한 컨텐츠가 추가되면 페이지가 잘 보입니다.

이것이 잘 될지 확실하지 않지만 시도 할 가치가 있습니다.

  • 현재 div 크기를 찾아 고정시켰다.
  • HTML 업데이트
  • "자동"까지의 높이와 너비.

물론, 당신은 이것을 시도 할 수 있습니다 :

function searchCallback(html) {
    var html_hidden = $('<div style="display:none;" class="hidden_insert">'+html+'</div>');
    $('#divSearchResults').html(html);
    $('#divSearchResults .hidden_insert').slideDown('medium');
}

가장 예쁘지는 않지만 효과가 있습니다. 당신은 기본적으로 해당 클래스의 요소를 만들 수있는 클래스 'hidden_insert'에 대한 CSS 스타일을 만들어 예쁘게 만들 수 있습니다. 또한이 날짜를 보내는 백엔드에서 JavaScript 대신 포장을 할 수 있습니다. 그런 다음 스크립트를 다음과 같은 것과 단순화 할 수 있습니다.

function searchCallback(html) { 
    $('#divSearchResults').html(html).find('.hidden_insert').slideDown('medium');
}

나는 이것들 중 하나를 테스트하지 않았지만 작동해야합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top