web-dev-qa-db-ja.com

jqueryでcss calc（）を使用する

これどうやってするの？

_$('#element').animate({ "width": "calc(100% - 278px)" }, 800);
$('#element').animate({ "width": "calc(100% - 78px)" }, 800);
_

_%_のみ、またはpxのみでcalc()でない場合は、jQueryの他のオプションを使用できますか？またはJavaScriptの他のトリック？

これは、ユーザーが要素をクリックしたときに行う必要がある変更なので、次のようになります。

_$("#otherElement").on("click", FunctionToToggle);
_

ユーザーが$("#otherElement")をクリックすると、トグル効果が発生する必要があります。

jquerycssjquery-animatecss-calc
12
Albert Cortada

多分これは役立ちます：

$('#element').animate({ "width": "-=278px" }, 800);

このスクリプトが要素から278pxを削除するたび

編集：これを試してください。ウィンドウのサイズが変更されると再計算されます。私があなたを正しく理解していれば、それは役立つはずです。

$(window).on("resize",function(){
   $('#element').css("width",$('#element').width()-275+"px");
});

CSS3オプション

CSS3にはアニメーション機能があるので、これも使用できます。

#element{
   -webkit-transition:all 500ms ease-out 0.5s;
   -moz-transition:all 500ms ease-out 0.5s;
   -o-transition:all 500ms ease-out 0.5s;
   transition:all 500ms ease-out 0.5s;
}

要素をアニメーション化する場合。そしてあなたはこれを行うことができます：

 $('#element').css("width","calc(100% - 100px)");

この場合、CSSがアニメーションを実行します。

これは古いブラウザでは機能しないことに注意してください

16
Rickert

calcの使用がうまくいくかどうかはわかりません。私の答えは、親の幅をチェックし、それに対して操作を実行してから、要素をアニメーション化します。

elWidth = $('#element').parent().width(); // Get the parent size instead of using 100%
elWidth -= 20; // Perform any modifications you need here
$('#element').animate({width: elWidth}, 500); //Animate the element

http://jsfiddle.net/yKVz2/2/

2
Joe Cullinan

私は@ jfriend00のコメントの助けを借りてそれを行う別の形を見つけました。

最初にCSSのルールを作成しますが、遷移はありません。

そしてトグルの機能で：

$('#element').animate({ width: "-=200px" }, 800, function () { $('#element').addClass('acoreonOpened');$('#element').removeAttr("style") });

.acoreonOpenedは、calc（100％-278px）のCSSルールがある場所です。

したがって、最初にjqueryでアニメーションを作成し、それが終了すると、jqueryが使用するスタイルを削除し（そうでない場合、CSSは機能しません）、クラスを配置した後、％で幅のように動作します。

1
Albert Cortada