1

我制作了一个 jquery 函数，其目的是每 5 秒添加一次填充，但它只工作一次。

<script type="text/javascript">

function aniMation(){

    var top=0;
    var left=0;

    $('#frame').css({top:++top,left:++left})

    }


$(function (){

    setInterval(aniMation,5000)

    })


</script>



<body>

<div class="main">
<div id="frame">
text

</div>
4

5 回答 5

1

也从 aniMation() 调用 setInterval(aniMation,5000) ，就像这样......

function aniMation(){
var top=0;
var left=0;

$('#frame').css({top:++top,left:++left})
  setInterval(aniMation,5000);
}
于 2012-04-23T06:21:23.190 回答
1 
function aniMation(){
    var top=0;
    var left=0;
    $('#frame').css({top:++top,left:++left});
    setTimeout(aniMation , 5000);
}

更新您的代码不起作用的原因：

您正在使用简写$(document).ready( function() { somecode; });为：

$(function (){
    setInterval(aniMation,5000);
});

这将在页面正确加载时执行（仅一次）。因此，我对您的aniMation函数进行了更改，以递归方式调用自身。

于 2012-04-23T06:22:12.977 回答
1

您只需调用一次 setTimeout。如果函数应该继续，我建议在动画结束时调用 setTimeout。我不建议使用 setInterval。

于 2012-04-23T06:23:45.957 回答
1

使您的 top 和 left 变量成为全局变量，因为您每次都重新初始化它，并且每次迭代都有 vvalue 1 。如果是全局的，您将增加它：

var top=0;
var left=0;

function aniMation(){
    $('#frame').css({top:++top,left:++left})
}


$(function () {
    setInterval(aniMation,5000)
});
于 2012-04-23T06:26:47.863 回答
0

试试这样：

var f   = $('#frame'), 
    top = 0, left = 0;

function aniMation(){
    f.css({top: (++top)+ 'px', left: (++left) + 'px'})    
}

你的例子只工作一次，因为每次你执行函数top和left属性都会重置为 0。

此外，最好创建对 iframe 元素的外部引用，因此不必在每次函数调用时重新创建一个新引用

于 2012-04-23T06:21:32.383 回答