12

これどうやってするの？

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

それが only%または onlyの場合は実行できますが、そうでpxないcalc()場合、jQuery の他のオプションを使用できますか? またはJavaScriptの他のトリック？

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

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

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

4

3 に答える 3

18

たぶんこれが役立ちます：

$('#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 がアニメーションを行います。

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

于 2014-02-20T14:59:54.903 に答える
2

使用してもうまくいくかどうかはわかりません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/

于 2014-02-20T15:16:57.987 に答える
1

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

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

そして、トグルの機能で：

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

.acoreonOpened は、calc (100% - 278px) を使用した CSS ルールがある場所です。

ということで、まずはjqueryでアニメーションを作って、終わったらjqueryが使っているスタイルを外して（そうじゃないとcssが効かない）、クラスを入れてから%で横幅みたいに振る舞う。

于 2014-02-20T15:30:49.333 に答える