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的动画图片：左，右一个翻转/旋转效果

回答

相关问题