1

私はこの本当にシンプルで効果的なjQueryスクリプトを適応させたいと思っています： jQueryは画像を左から右にアニメーション化しますか？（DonamiteIsTntに感謝します）..。

「スイッチ」アニメーションで2つの画像を効果的に使用できるように、それを拡張する方法を知りたいです。たとえば、鳥が画面の右側に飛ぶ-アニメーションを反転-鳥が左に戻って飛んでいるように見える-アニメーションを反転-再び右に飛ぶ。

私が考えていた「スイッチ」アニメーションは、2D画像の線に沿って効果的に回転します（金魚がボウルの中で前後に泳いでいるように、ガラスの正面からどのように見えるかなど）。

この場合、単一の画像を使用して、幅30pxから0px、次に-30pxなどに縮小して、反対方向を向くかどうかはわかりません。または、右向きの画像と左向きの画像を切り替える必要があります。いずれにせよ、それをアニメーション化するのはクールでしょう。

このサイトで、左右の効果とフリップ効果について同様の質問を見つけましたが、組み合わせていません。だからどんな助けでも大歓迎です！

補足として：私はhttp://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.jsにリンクしました

編集：これまでに...

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">

    $(document).ready(function() {

function beeRight() {
    $("#b").animate({left: "+=300"}, 5000, "swing", beeLeft);
    $("#img").attr("src","rightArrow.gif");
}
function beeLeft() {
    $("#b").animate({left: "-=300"}, 5000, "swing", beeRight);
    $("#img").attr("src","leftArrow.gif");
}
beeRight();
    });
    </script>
    </head>

    <body>
<div id="b" style="position:absolute;"><img id="img" src="rightArrow.gif"></div>
    </body>

次に、次のようなアニメーション画像スワップを追加するにはどうすればよいですか。http: //davidwalsh.name/demo/css-flip.php-言うまでもなく、それほど複雑である必要はありません。私はこれをdivではなくimgで行うことを考えています。このようなことがCSSでどのように行われるかは理解していますが、jQuery/Javascriptに組み込む方法がわかりません。

再度、感謝します！

4

1 に答える 1

0

対象とするブラウザによっては、CSS3で完全に効果を発揮することができます。いくつかのクラスを使用して、開始状態と終了状態を表し、いくつかtranslatex transformsをscalex transforms使用して、反転を処理します。次に、CSStransitionプロパティを追加してアニメーション化します。次に、好きなものを使用して、クラスの変更、:hoverjQueryタイマー、要素のクリックなどをトリガーできます。

于 2013-01-15T14:10:48.630 に答える