Javascript 运行功能一次（在while循环中）_Javascript_Php_Jquery_Animation

Javascript 运行功能一次（在while循环中）

javascript php jquery animation

Javascript 运行功能一次（在while循环中）,javascript,php,jquery,animation,Javascript,Php,Jquery,Animation,尝试在我的while循环中使用动画运行我的函数，在动画中我移动方块，我只希望它运行一次。不要让它工作。如果我使用setInterval，它只会设置多次动画。而我现在是如何拥有它的，一点也不活跃。这就是现在的样子。谢谢你给我一些建议。谢谢编辑-根据计数id，将正方形设置为不同位置的动画 <?php ... $count = 0; while($rows = mysql_fetch_array($data)){ //many rows $count = $count + 1 $id=

尝试在我的while循环中使用动画运行我的函数，在动画中我移动方块，我只希望它运行一次。不要让它工作。如果我使用setInterval，它只会设置多次动画。而我现在是如何拥有它的，一点也不活跃。这就是现在的样子。谢谢你给我一些建议。谢谢

编辑-根据计数id，将正方形设置为不同位置的动画

<?php
...
$count = 0;
while($rows = mysql_fetch_array($data)){ //many rows
$count = $count + 1
    $id= $rows['id']; //different id's for each row


?>
<script>
    var ID = '<?php echo $id; ?>';
            var count = '<?php echo $count; ?>';      
</script>

<div id="squares" style="height:50px; width:50px; position:relative; background:black;" >

<script>
    document.getElementById('squares').id = ID; //make div id "squares" to ID

//So here the it doesn't work.
function(){
    if(count == 1){
    $('#' + ID).animate({left: (700), top: (300)}, 2000);
    $('#' + ID).animate({left: (300), top: (500)}, 2000);
    }
    if(count == 2){
    $('#' + ID).animate({left: (100), top: (400)}, 2000);
    $('#' + ID).animate({left: (100), top: (800)}, 2000);
    }
}

</script>
<?php
}
?>

”；
var计数=“”；
document.getElementById（'squares'）。id=id//将div id“正方形”设置为id
//所以在这里，它不起作用。
函数（）{
如果（计数=1）{
$（'#'+ID）.animate（{左：（700），顶：（300）}，2000）；
$（'#'+ID）.animate（{左：（300），顶：（500）}，2000）；
}
如果（计数=2）{
$（'#'+ID）.animate（{左：（100），顶：（400）}，2000）；
$（'#'+ID）.animate（{左：（100），顶：（800）}，2000）；
}
}

我能看到的第一件事是，在PHP while循环中，您正在编写一组JS脚本，每个脚本处理单个元素的动画。您应该将其更改为单个JS脚本，用于为所有元素设置动画：

<?php
...    
while($rows = mysql_fetch_array($data)){ //many rows
    $id= $rows['id']; //different id's for each row
    $left = $rows['left']; // <---- replace this with your logic for determining top and left
    $top = $rows['top'];
?>

<div id="<?php echo $id; ?>" class="square" style="height:50px; width:50px; position:relative; background:black;" data-animateLeft="<?php echo $left; ?>" data-animateTop="<?php echo $top; ?>">

<?php
}
?>

<script>
$('.square').each(function(){
   $this = $(this);
   $this.animate({left: +$this.data('animateLeft'), top: +$this.data('animateTop')}, 2000);
});
</script>


$（文档）.ready（函数（）{
//注意：我怀疑您要做的是一个接一个地运行动画，
//你需要一个回调函数。
$（'.toBeAnimated1'）。动画（{左：（700），顶：（300）}，2000，函数（）{
$（'.tobeanimate1'）。动画（{左：（300），顶：（500）}，2000）；
});
$（'.toBeAnimated2'）。动画（{left：（100），top：（400）}，2000，function（）{
$（'.toBeAnimated2'）.animate（{左：（100），顶：（800）}，2000年）；
});
});
“setInterval”=>循环与“setTimeout”=>等待并运行一次首先您应该分离HTML、CSS、JavaScript和PHP。不要将所有内容都放在同一个文件中，因为这只会让您得到代码汤。如果只希望循环中的函数运行一次，为什么要在循环中调用它？setTimeout也会反复运行它：/@Jahnux73。您需要在循环中的哪一点运行它？第一次？当从数据库中读取特定值时？查看您的观点。但是每个正方形都将被设置到不同的位置。如果我能从中得到一些好处，我会感谢的！：）@Tibos@AlexGoransson查看此编辑。您还可以在JS中保留一个数据结构，其中包含从PHP填充的每个项目的坐标，但我认为它更像这样的语义。您可能需要考虑在数据库中保存正方形（起始位置、结束位置等）的值，以便使其更通用。
<html>
<head>
<script>

    $(document).ready(function () {
        // NOTE: I suspect what you want to do is run one animation after the other,
        // you need a callback function for that.
        $('.toBeAnimated1').animate({ left: (700), top: (300) }, 2000, function() {
            $('.toBeAnimated1').animate({ left: (300), top: (500) }, 2000);
        });
        $('.toBeAnimated2').animate({ left: (100), top: (400) }, 2000, function() {
            $('.toBeAnimated2').animate({ left: (100), top: (800) }, 2000);
        });
    });

</script>
</head>
<body>
<?php
...
$count = 0;
while($rows = mysql_fetch_array($data)){ //many rows
$count = $count + 1
    $id= $rows['id']; //different id's for each row
    ?>
    <div id="<? echo $id; ?>" class="toBeAnimated<? echo $count; ?>" style="height:50px; width:50px; position:relative; background:black;" >
<?
}
?>
</body>
</html>