7

animateWebkitアニメーションを使用して、Jqueryでメソッドを複製できるかどうかを理解しようとしています

jqueryを使用して50px x 50pxのdivがあると仮定すると、次を使用して簡単にサイズ変更してアニメーション化できます。

$('#mybox').animate({'width':'100px','height':'70px'}, 300) 

// so from 50x50 it animates to 100x70 
// the values 100 and 70 should ba dynamically 
// input so i can create a function (Width,Height) to alter my box

可能であれば、CSS WebKitアニメーションを使用して同じことを行う方法を知りたい

PS。Firefox で動作させる必要はありません。Safari/Chrome の単なるプロジェクトです。

4

4 に答える 4

12

この CSS を使用できます。

div.mybox {
    width: 50px;
    height: 50px;
    background-color: red;
    -webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    -moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    -o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    transition:width 300ms ease-in-out, height 300ms ease-in-out;
}

次に、jQuery を使用して幅と高さのプロパティを更新できます。

$(document).ready(function() {
    $("div.mybox").css({"width": "100px", "height": "70px"});
});

したがって、ブラウザがサポートしている場合、これはアニメーション化されます。ただし、もちろん、これらのプロパティを別のクラスに配置し、このクラスを要素に追加することを検討してください。このように .addClass() 関数を使用できます。

$(document).ready(function() {
    $("div.mybox").addClass("enlarged");
});

または、たとえば、toggleClass 関数とクリック イベントで使用することもできます (クリックするとボックスが拡大され、再度クリックすると通常のサイズに変更されます)。

$(document).ready(function() {
    $("div.mybox").click(function() {
        $(this).toggleClass("enlarged");
    });
});

この場合、プロパティは CSS クラスで定義する必要があります。

div.mybox.enlarged {
    width: 100px;
    height: 70px;
}

また、マウスオーバーでアニメーションを発生させたい場合、追加する必要があるのは次のとおりです。

div.mybox:hover {
    width: 100px;
    height: 70px;
}

この種のアニメーションは、JS をまったく使用せずに実行できます。

また、CSS3の遷移属性と変換関数についても読む必要があります (これらは多くの場合に使用できます)。ここで説明します。

于 2012-04-13T15:55:18.677 に答える
6

CSS3 を使用すると、これが非常に簡単になります。トランジションが追加され、 で寸法を変更できます:hover。サンプルの div は次のとおりです。

<div id="mydiv">
    <!-- Div content goes here -->
</div>

したがって、あなたのdivは「mydiv」です。残りは CSS3 で行われます。

#mydiv {
    width: 50px;
    height: 50px;
    background: #f34543;
    -webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    -moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    -o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
    transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
#mydiv:hover {
    width: 100px;
    height: 70px;
}

JSFiddle: http://jsfiddle.net/dakoder/ZGHLM/

それでおしまい！50x50px から 100x70px にサイズ変更されます。Chrome ではテスト済みですが、Safari ではまだテストされていません。

于 2013-05-13T21:30:19.617 に答える
1 
@keyframes animationName {
    0% {width: 50px; height:50px}
    100% {width: 100px; height:70px}
}

これを見てください： http://www.css3files.com/animation/

于 2012-04-13T15:57:55.493 に答える
0

この場合のように、CSSを新しいstyleSheetまたはインラインスタイルとして適用することにより、「動的」値でCSSアニメーションとトランジションを使用できます。

http://jsfiddle.net/4zD74/

于 2012-04-17T00:36:04.900 に答える