Замените слайд jQuery на animate() CSS3

Question

У меня есть jQuery slideUp и down и на странице, и производительность анимации очень плохая. Поэтому я хочу заменить скользящую функцию на.animate() или.css(), чтобы использовать CSS3-анимацию (которая обычно более плавная, чем jQuery)

вот мой код

jQuery('.close').on("click", function() {
var parent = jQuery(this).parent('.parentbox');
parent.children('.box').slideUp('500');
jQuery(this).hide();
parent.children('.open').show();
parent.animate({"opacity":"0.4"});
});

jQuery('.open').on("click", function() {
var parent = jQuery(this).parent('.parentbox');
parent.children('.box').slideDown('500');
jQuery(this).hide();
parent.children('.close').show();
parent.animate({"opacity":"1"});
});

Теперь, если я заменю .slideUp с .animate({"height":"0px"}); как я могу вернуть его на прежнюю высоту, когда .open нажал?

Я использую куки, чтобы закрыть окно, если оно было закрыто в последний раз. Это оставляет меня не в состоянии использовать .height() проверить высоту ящика, так как в некоторых случаях он может быть закрыт.

Answer 1

Ты можешь использовать .animate({ "height":"hide" }) (и наоборот) для достижения этой цели.

Пример:

function slideUp() {
    $(".slideme").animate({ "height": "hide" });
}

function slideDown() {
    $(".slideme").animate({ "height": "show" });  
}

jsFiddle: http://jsfiddle.net/8VVde/14/

Answer 2

Я думаю, что, возможно, оно того не стоит. Я не уверен, что полная замена CSS3 получится намного более краткой, чем этот беспорядок. И это при условии, что вы используете jQuery Transit. Хитрость заключается в том, что вам нужно визуализировать высоту до того, как вы начнете переход CSS3, и это не просто.

var $new = $(content)
    .css({'visibility': 'hidden', 'position': 'absolute', 'overflow': 'hidden'})
    .appendTo($append);
var height = $new.height();
$new.css({'height': 0})
    .css({'position': 'static', 'visibility': 'visible'})
    .transition({'height': height + 'px'});

Answer 3

Я пытаюсь заменить jQuery slideDown.

Предложение Андерса Холмстрема работает как шарм! Можно ли заменить animate на "transition ()" ( http://ricostacruz.com/jquery.transit)?

Это не похоже на анимацию, но вместо этого завершается при нажатии:

el.transition({ "display": "block", "height": "show"}, 250);