JQuery - анимация/скольжение по высоте: 100%

У меня здесь есть код:

$('.aktualita_sipky').toggle(function() {
    $(this).parent().find('.aktualita_content').animate({ 
        height: "100%",
      }, 1500 );
}, function() {
    $(this).parent().find('.aktualita_content').animate({ 
        height: "120px",
      }, 1500 );
});

Теперь, когда я нажимаю его как первый "переключатель", он просто отображается мгновенно (без анимации), когда я нажимаю второй "переключатель", он красиво скользит вверх.

Есть ли способ сместить его до 100% с помощью этой приятной анимации?

Ответы

Ответ 1

Возможно, вы могли бы сделать что-то вроде:

$height = $(window).height();   // returns height of browser viewport
//Or
$height = $(document).height(); // returns height of HTML document
//Or
$height = $(whatever).height();
$('.aktualita_sipky').toggle(function() {
    $(this).parent().find('.aktualita_content').animate({ 
        height: $height + 'px',
      }, 1500 );
}, function() {
    $(this).parent().find('.aktualita_content').animate({ 
        height: $height + 'px',
      }, 1500 );
});

http://docs.jquery.com/CSS/height

Ответ 2

Моим обходным путем для этого было добавить высоты дочерних элементов в div, добавив немного для учета полей:

function() {
  $('.accordionblock.open').removeClass('open');
  var childrenheight = 0;  $(this).children().each(function() {childrenheight += ($(this).height()*1.2)});
  $(this).animate({height:childrenheight},300).addClass('open');
  }
}

Ответ 3

Я нашел этот пост, ища решение самостоятельно, и у Karim79 было большое предложение использовать переменную и функцию height().

Для меня я не начинаю с высоты на 100%, так как у меня есть заданная высота, определенная в моей таблице стилей. Так что я делаю в функции для расширения, я делаю переменную, у которой есть запрос, чтобы вернуться к определенному элементу, который я хочу развернуть, и изменяет высоту css до 100% и возвращает высоту переменной. Затем я установил css для высоты назад (я полагаю, я мог бы использовать vars, чтобы указать исходную высоту предустановки, а также возможность редактирования css в будущем), а затем запустить анимационную функцию, используя var с высотой.

function expandAlbum (){
    var fullHeight = jQuery(this).prev('.albumDropdown').css('height' , '100%').height();
    jQuery(this).prev('.albumDropdown').css('height' , '145px');
    jQuery(this).prev('.albumDropdown').animate({'height' : fullHeight}, 1000, function(){jQuery(this).stop();});
    jQuery(this).html('close');
}

Я тоже не очень опытен, поэтому прошу небрежное кодирование.