[英]jQuery looping doesn't seem to work
我正在嘗試使用以下代碼為鳥的翅膀設置動畫(上下擺動一點):
$bird_wing_left = $(".bird_wing_left"); function rotate($bodysec) { $bodysec.animate({ transform: "rotate(30deg)" }, 0, function() { $(this).css({ transform: "rotate(70deg)" }); rotate($(this)) ; }); } rotate ($bird_wing_left) ;
.bird_wing_left { margin: 50px ; width: 100px ; height: 100px ; background: blue ; }
<div class="bird_wing_left"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
但是,代碼不會循環。 它將旋轉到70度並停在該處。 我在函數內部調用了函數,所以我不確定為什么不循環。
transform
調用不執行任何操作,因為您指定的動畫時間為0
。 如果要立即進行轉換,請在回調中使用css
。 此外,查看Chrome中的開發控制台會顯示too much recursion
錯誤,因此您應該使用setInterval
重寫代碼:
$bird_wing_left = $(".bird_wing_left");
function rotate ($bodysec) {
(function () {
var $_bodysec = $bodysec ;
var $_angle = 30 ;
setInterval (function () {
$_bodysec.css({
transform: "rotate(" + $_angle + "deg)"
});
$_angle = $_angle == 70 ? 30 : 70 ;
}, 200) ;
}) () ;
}
rotate ($bird_wing_left) ;
$bird_wing_left = $(".bird_wing_left"); function rotate ($bodysec) { (function () { var $_bodysec = $bodysec ; var $_angle = 30 ; setInterval (function () { $_bodysec.css({ transform: "rotate(" + $_angle + "deg)" }); $_angle = $_angle == 70 ? 30 : 70 ; }, 200) ; }) () ; } rotate ($bird_wing_left) ;
.bird_wing_left { margin: 50px ; width: 100px ; height: 100px ; background: blue ; }
<div class="bird_wing_left"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.