3

jQueryのslideUpとdownとページがあり、アニメーションのパフォーマンスが非常に悪いです。したがって、CSS3アニメーション（一般的にjQueryよりもスムーズ）を利用するために、スライディング関数を.animate（）または.css（）に置き換えたいと思います。

これが私のコードです

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

前回閉じた場合は、Cookieを使用してボックスを閉じます。これにより.height() 、チェックボックスが閉じている場合があるため、チェックボックスの高さを使用できなくなります。

4

3 に答える 3

4

.animate({ "height":"hide" })これを実現するために（およびその逆を）使用できます。

例：

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

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

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

于 2012-09-24T12:19:51.400 に答える
0

たぶんそれだけの価値はないと思います。CSS3を完全に置き換えると、この混乱よりもはるかに簡潔になるかどうかはわかりません。そして、これはjQueryTransitを使用していることを前提としています。秘訣は、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'});
于 2015-09-24T06:45:01.663 に答える
-1

jQueryのslideDownを置き換えようとしています。

AndersHolmströmによる提案は魅力のように機能します！アニメーションを「transition（）」（http://ricostacruz.com/jquery.transit）に置き換えることはできますか？

これはアニメーション化されていないようですが、クリックすると終了します。

el.transition({ "display": "block", "height": "show"}, 250);
于 2013-06-22T08:44:01.340 に答える