jQuery的動畫圖片：左，右一個翻轉/旋轉效果

我期待去適應這個非常簡單而有效的jQuery腳本： jQuery to animate image from left to right?（感謝DonamiteIsTnt）...jQuery的動畫圖片：左，右一個翻轉/旋轉效果

我想知道如何以擴展它，所以你可以有效地使用兩個圖像與「開關」動畫。例如，一隻鳥飛到屏幕右側 - 翻轉動畫 - 鳥似乎飛回到左側 - 翻轉動畫 - 再次飛向右側。

「開關」動畫我正在考慮沿着二維圖像的線條有效地轉向自身（例如金魚在碗中來回遊動，以及它從玻璃前端看起來如何）。

我不知道你是否會在這種情況下使用單個圖像，並將其從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 - 不用說，並不需要那麼複雜。我正在尋找與img的，而不是div的。我明白這樣做會怎樣在CSS中完成，但我不知道如何將它與jQuery/Javascript結合。

再次感謝！

來源

2013-01-15 Mez Adams

更改圖像取決於您使用的元素。當您使用''時，您需要在調整動畫方向之前更改'scr'屬性。如果你使用另一個元素，那麼你可能使用的是背景圖像，需要改變的是什麼。 –

最可能的是 - 它更有意義，因爲我可能會在大多數應用程序中將它疊加在靜態背景中。我覺得通過使用CSS定位和z-index，在一個地方也可以有更多的動畫（比如一隻鳥和一隻蜜蜂獨立飛行）。你認爲哪個更靈活？ –

''完全可以。在改變動畫的方向之前，只需使用'$（「＃img」）。attr（「src」，「flyleft.jpg」）;''。 –

根據您定位的瀏覽器，您可以完全在CSS3中實現該效果。使用幾個類來表示開始和結束狀態，以及一些translatex transforms和scalex transforms來處理翻轉。然後添加CSS transition屬性來設置動畫。然後你可以使用你喜歡的任何東西來觸發類更改，:hover，jQuery定時器，元素點擊，無論如何。

來源

2013-01-15 14:10:48 jxpx777

非常感謝您的鏈接！他們正是我想要幫助我開始這個項目的！我假設你需要仍然使用jQuery，但是它有一切功能自主嗎？ IE瀏覽器。如果我要在CSS中創建左轉換，右轉，右轉換，左轉，重複等;仍然需要jQuery告訴瀏覽器在沒有懸停/點擊提示的情況下運行這些功能（在頁面加載時）並且無限期重複？與上面的代碼一樣嗎？ –

從你的帖子開始，繼續我的研究，我發現了CSS3動畫和@keyframes。他們做我想做的一切和更多！在這裏，我認爲JS和jQuery是網站上自動化事物的唯一答案;展示了我對CSS的力量的狹隘態度！謝謝jxpx777帶領我走向正確的方向！我發現這個網站是CSS動畫的一個很好的解釋：[MDN]（https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations） - 唯一的缺點是，在每個瀏覽器欄中都適用。任何人都知道工作？ –

jQuery的動畫圖片：左，右一個翻轉/旋轉效果

回答

相關問題