web-dev-qa-db-ja.com

jQuery animate（）およびCSS calc（）

JQueryanimateを使用してCSScalc()を設定しようとしました。例：

_$element.animate({
    height: 'calc(100% - 30px)'
}, 500);
_

calc()がjQueryanimateで機能していないことに気づきました...

私はそれを行う方法があることを願っています、私はそれを行うための同様の方法、代替または回避策を望んでいません、私はcalc（）を設定したい

これは不可能ですか？どういうわけか？

可能であれば、その方法を教えてください。

cssjquery-animatecss-calc
16
neoDev

Calc（）を希望どおりに設定しても機能しません。これを行う最も簡単な方法は、値を変数に「計算」することです。次のようになります。

var newHeight = $('.container').height() - 30;

次に、次のような新しい変数でanimate（）を使用できます。

$('.animate-me').animate({
  height: newHeight
}, 500);

例を使用してCodePenを作成しました。明るい方の正方形（.animate-me）をクリックすると、.containerの高さから30pxを引いた100％にアニメーション化されます。これがあなたが探していたものだといいのですが...

http://codepen.io/anon/pen/JYqPxm

ウィンドウのサイズ変更でも機能させたい場合で、グローバル変数を使用している場合は、次のように、サイズ変更関数内から変数を更新できます。

$(window).on("resize",function() {
  // update all variables that you need
});
11
Boguz

私はこの正確な質問への答えをグーグルで探していました。私はこのリンクを見て、「YES！」のようでした。それから私は答えを見て、「ノー！」のようでした。あなたの例に基づいて、私がしたことは次のとおりです。

var nextHeight = $element.parent().width()-30;
$element.animate({
    height:nextHeight
}, {duration:500, complete:function(){ $element.width("calc(100% - 30px)"); } });

私はあなたが求めたことを正確にやらなかったことを知っていますが、それはあなたがそれをアニメートしたい場所にアニメートし、あなたがそれを終えるとあなたがそれを設定したい幅になります。アニメーション化中にサイズを変更しない限り、これは適切な回避策だと思います。

4
Andrew