Javascript/jQuery оживляет динамическую высоту?

Кто-нибудь знает, почему это воодушевляет хорошо:Javascript/jQuery оживляет динамическую высоту?

function setContainerHeight() { 
    $(".pagecontainer").animate({ 
     height: '700px' 
    }, 500); 
}

т.е. фиксированную высоту, но это не живой вообще?

function setContainerHeight() { 
    $(".pagecontainer").animate({ 
     height: 'auto' 
    }, 500); 
}

Он по-прежнему изменяет размер до авто, но без анимации, просто привязывается к нему.

Мой код:

JS:

<script> 

    function setContainerHeight() { 
     $(".pagecontainer").animate({ 
      height: 'auto' 
     }, 500); 
    } 

    $('.link').on('click', function(e){ 
     $('.pagecontainer>div').fadeOut(0); 
     setContainerHeight(); 
     $(this.getAttribute("href")).fadeIn(); 
    }); 

</script>

CSS:

.pagecontainer { 
min-height:450px; 
width:80%; 
min-width:800px; 
padding:50px 0; 
margin: 0 auto; 
} 
.pagecontainer>div{ 
display: none; /*wait until page needs to be faded in*/ 
padding-left:50px; 
padding-right:50px; 
position:relative; 
}

HTML:

<div class="pagecontainer"> 

    <a href="#page1" class="link">page 1</a> 
    <a href="#page2" class="link">page 2</a> 
    <a href="#page3" class="link">page 3</a> 

    <div id="page1">TONS OF TEXT HERE</div> 

    <div id="page2">A BIT OF TEXT HERE</div> 

    <div id="page3">BUNCH OF IMAGES</div> 

</div>

Существуют различные дивы выцветанию в/из, каждый из нуждающихся в другой высота. Ширина страниц также динамична, но не нуждается в анимации, просто растягивается/сжимается с видовым экраном.

Спасибо.

источник

2013-03-13 Windbrand

без чтения кода JQuery, я бы предположил, одушевленные не будет знать его конечную высоту. Исправить - найти его, а затем оживить, давая ему целое число. – Popnoodles

Добавлен JS/CSS/HTML. – Windbrand

Из опыта у меня была эта же проблема, но вы не можете анимировать auto. Однако вы можете получить высоту контейнера перед рукой, а затем оживить ее. Например.

function setContainerHeight() { 
    newHeight = $('.pagecontainer').height(); 
    $(".pagecontainer").animate({ 
     height: newHeight 
    }, 500); 
}

источник

2013-03-13 18:44:22 dev

Это ничего не изменит. – Popnoodles

@popnoodles ах да, вы правы, это не так, благодаря извлеченному уроку. – dev

DEMO http://jsfiddle.net/zbB3Q/

Animate не знает конечную высоту. Вам нужно будет потом создать анимацию, но для этого вам нужно быстро установить высоту и вернуться к тому, что было до оживления.

function setContainerHeight() { 
    var heightnow=$(".pagecontainer").height(); 
    var heightfull=$(".pagecontainer").css({height:'auto'}).height(); 

    $(".pagecontainer").css({height:heightnow}).animate({ 
     height: heightfull 
    }, 500); 
}

источник

2013-03-13 18:44:55 Popnoodles

Не будет ли это инициировать FOUC (вспышка нестандартного контента), когда 'var heightfull = $ (" .pagecontainer "). Css ({height: 'auto'}). Height();' read? – Bill

Нет, это слишком быстро, это не похоже на js, ожидающий body.onload после того, как браузер отобразил некоторый контент. – Popnoodles

Я отредактировал мой вопрос, чтобы включить мой JS/CSS/HTML. .pagecontainer - это общий контейнер, в котором есть несколько div-страниц. Страницы меняются, поэтому .pagecontainer должен менять высоту, чтобы отразить ее. Я пробовал свой код, используя 'var targetpage = $ (this) .attr (" href ");' затем получая высоту целевой страницы, но она, похоже, не работает. – Windbrand

Немного поздно на вечеринку здесь, но у меня была такая же проблема в некоторых из моего кода. Я написал крошечный плагин jQuery для решения этой проблемы - его доступный here, если вам все еще нужно решение этой проблемы.

источник

2014-01-19 11:45:21 AlexZ

Я сделал небольшой плагин, который занимается этой проблемой - должен быть довольно простым, основанный на методе Дарси Кларка, который был опубликован here, с некоторыми (imo) очень необходимыми улучшениями. Просто подключи и играй для JQuery:

https://github.com/azaslavsky/jQuery-Animate-Auto-Plugin

источник

2014-03-18 07:23:27 AlexZ

Javascript/jQuery оживляет динамическую высоту?

ответ

Смежные вопросы