jQuery & CSS - соответствует высоте div при анимации - PullRequest
Новая
       16

jQuery & CSS - соответствует высоте div при анимации

1 голос
/ 22 августа 2011

У меня осталось два <div> в родительском <div>. Используя jQuery, div.will_slide_down будет скользить вниз в некоторый момент (используя $("div.will_slide_down").slideDown()). Когда он скользит вниз, высота div.first должна также увеличиваться, чтобы соответствовать высоте div.second одновременно.

Как я могу это сделать? 

 <div class="wrap">
      <div class="first" style="width: 200px; float: left;"></div>
      <div class="second" style="width: 700px; float: left;">
           <p>BlaBlaBla</p>
           <div class="will_slide_down" style="display: none">Some hidden text</div>
      </div>
 </div>

Единственный способ, о котором я могу думать, - это запустить функцию, когда slideDown из div.second завершен, но это испортит компоновку. Это должно произойти одновременно.

Ответы [ 3 ]

7 голосов
/ 22 августа 2011

Я думаю, что лучшим способом было бы использовать .animate () и функцию шага. Шаговая функция запускается на каждом «шаге» анимации. Нечто подобное должно сработать: 

$('div.will_slide_down').animate({height: 'show'}, {step: function(now, fx){
    var new_height = $('div.second').height;
    $('div.first').css('height', new_height);
}});
2 голосов
/ 22 августа 2011

Предполагая, что ваш слайд будет вызван каким-либо событием, попробуйте что-то вроде этого: 

$(document).ready(function() {
$("element").click(function() {
    follower($("div.first"));
$("div.will_slide_down").slideDown()).
})
    })

    function follower(el) {
        if ($("div.will_slide_down").is(":animated"))
        {
            var leader = $("div.will_slide_down");
            while(leader.is(":animated"))
                  {
                  el.animate({
                      height: leader.css('height')
                  },3000);
                  }
        }
    }
0 голосов
/ 22 августа 2011

Что вы могли бы сделать, так это расположить .will_slide_down где-нибудь вне экрана - не скрывая его - при загрузке страницы, чтобы измерить ее высоту.Затем вы можете спрятать его, переместить обратно и использовать высоту (добавив начальную высоту .second ...), чтобы вычислить новую высоту .first и просто анимировать их одновременно.

...