我设法完成延迟然后翻译我的图像 - 然后我想在移动时稍微旋转一下,所以我找到了一种从这里旋转它的方法https://code.google.com/p/jqueryrotate/
所以我设法应用它但结果是旋转忽略了延迟和翻译我尝试了几种方法将功能组合在一起但不确定最好的方法是如何做到的。
我只是使用css转换,但理想情况下我需要它在IE7中工作。
我可以尝试一种更简单的方法吗?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.hold{
width:250px;
height: 400px;
margin: 0 auto;
background: #eee;
position: relative;
}
.pos{
position: absolute;
}
.ccard{
width:250px;
height: 400px;
background: red;
}
.rcard{
width:250px;
height: 400px;
background: blue;
left:0px;
}
.lcard{
width:250px;
height: 400px;
background: green;
left:0px;
}
</style>
<body>
<div class="hold">
<div class="lcard pos" style="left:0px;">
</div>
<div class="rcard pos">
</div>
<div class="ccard pos">
</div>
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.transform-0.9.3.min_.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jQueryRotate.js"></script>
<!-- Jumping Animation -->
<script type="text/javascript">
$(function(){
$('.lcard').delay(2600).animate({'top': '-12px', 'left': '100px'}, 800,'easeOutQuart');
$('.rcard').delay(2600).animate({'top': '-12px', 'left': '-100px'}, 800,'easeOutQuart');
});
var rotation = function (){
$(".lcard").rotate({
angle:0,
animateTo:20,
});
}
rotation();
</script>
</html>
答案 0 :(得分:0)
尝试使用setTimeout()。它用于在指定时间后调用方法。适合这种情况的例子。
setTimeout(function() {
$(".lcard").rotate({
angle:0,
animateTo:20,
});
}, 2600);
有关setTimeout()的更多信息https://developer.mozilla.org/en/docs/Web/API/window.setTimeout