1

我的代码有什么问题？动画即将在两个值之间更改单元格的宽度。动画不起作用。你能修复脚本部分吗？我很着急。

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
    .tbl{display: table;}
    .cell{display: table-cell;}
    .container{background: url("bgs/12.png")no-repeat;width: 179px;height: 119px;}
    #leftP{background: url("bgs/16.png")no-repeat right;width: 86px;height: 119px}
</style>
<script type="text/javascript">

    $(document).ready(function(){
        function Animation(){
            $('leftP').animate({width:'48px'},"slow");
            $('leftP').animate({width:'86px'},"slow","",Animation());

        }
    });
</script>
<title></title>
</head>
<body>
<div class="container tbl">
    <div id="leftP" class="cell width"></div>
    <div class="cell"></div>
</div>
</body>
</html>
4

4 回答 4

3

你没有Animation()在任何地方调用......除非你在某个地方调用这个函数，否则它不会做任何事情Animation()......

于 2013-03-18T06:43:25.383 回答
1

您需要第一次调用函数。

function Animation()
{
    $('#leftP').animate({width:'48px'},"slow");
    $('#leftP').animate({width:'86px'},"slow","",Animation());
}

$(document).ready(function()
{
    Animation();
});

您也忘记ID在jQuery选择器中定义。

$('#leftP')
于 2013-03-18T06:45:19.543 回答
1

试试这个：你定义leftP了动画，但 id 必须是#leftP

$(document).ready(function(){
    function Animation(){
        $('#leftP').animate({width:'48px'},"slow");
        $('#leftP').animate({width:'86px'},"slow","",Animation());

    }

    Animation();
});
于 2013-03-18T06:45:45.333 回答
0

您的代码存在许多问题，我将尝试解决所有问题：

  1. 您的选择器错误，您需要使用id-selector #leftP
  2. 您需要按顺序执行动画，因此在第一个动画的回调中执行第二个动画。
  3. 您需要第一次调用 Animation-function 才能启动所有内容。在我的示例中，我使用了立即调用的函数表达式。

这就是我相信你正在寻找的东西。

$(function () {
    (function Animation(){
        $('#leftP').animate({width:'48px'},"slow", function () {
           $('#leftP').animate({width:'86px'},"slow","",Animation());
        });    
    })();
});

演示

于 2013-03-18T07:14:27.627 回答