2

クラスのスタイルを使用して特定のdivをアニメーション化する方法はありますか？

例（html）：

<div id="nice_div"></div>

Css：

#nice_div{
    width: 200px;
    height: 150px;
}

.animate{
    width: 300px;
    height: 250px;
}

私が達成したいのは次のようなものです：

$("#nice_div").animate(".animate");

明らかに、このコードは架空のものです。同様のことを達成する方法はありますか？そうそう、.animatedivはDOMでは使用できません。どんな助けでも大歓迎です。

4

5 に答える 5

3

はい、これは可能です：

#nice_div {
    -webkit-transition: height 1s, width 1s;
    -moz-transition: height 1s, width 1s;
    transition: height 1s, width 1s;


    width: 200px;
    height: 150px;
}

$("#nice_div").addClass(".animate");
于 2012-04-16T09:23:17.677 に答える
0

これは不可能です。このanimate()メソッドは、変更するプロパティのマップのみを受け入れます。

クラスがすでに適用されている非表示の要素からマップを作成することは可能かもしれませんが、スタイルシートからどのスタイルが設定されているかをプログラムで知ることができないため、これを実装するのは非常に難しいでしょう。ブラウザによって自動設定されます。

于 2012-04-16T09:17:01.093 に答える
0

jqueryを使用して、特定の要素のCSSクラスを追加または削除できます

$('#nice_div').click(function(){
this.addClass('animate');
                              });

を使用してクラスを削除することもできます

$('#nice_div').removeClass('animate');
于 2012-04-16T09:19:52.357 に答える
0

jQueryanimate()関数には特定のプロパティがあり、渡す必要があるため、これは不可能です。cssクラスに直接接続しません。

さらに、同じ要素に新しいクラスを割り当てる必要がある場合は、必要に応じてaddClass()関数またはcss()関数を使用できます。

このようなことを達成するために試みることができるのは、ページに隠しファイルを置くことです。非表示フィールドの値にアクセスし、animate()関数の値を連結します。

于 2012-04-16T09:20:59.970 に答える
-1

jqueryを使用してみることができます

単純な画像などの要素をアニメーション化するには：

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
  style="position: relative; left: 10px;" />

画像の不透明度、左オフセット、高さを同時にアニメーション化するには：

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});
于 2012-04-16T09:16:05.027 に答える