多线程上的jquery动画

jquery动画函数是否在多线程上工作

在我的代码中…假设我单击顶部按钮并调用运行良好的函数

现在单击任何剩余的一次…第二个功能也可以工作，但第一次调用也可以

那么，如何一次调用一个函数呢

它是多线程的，这是杀死它的方法吗

<table width="1200px" height="600px" align="center">
        <tr>
            <td>
            </td>
            <td style="text-align: center">
                <button id="btntop">
                    top</button>
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td style="text-align: right">
                <button id="btnleft">
                    left</button>
            </td>
            <td style="text-align: center">

                <img id="book" src="Image/images.jpg" alt="" width="250" height="123" style="position: relative;
                    left: 10px;" />

            </td>
            <td>
                <button id="btnright">
                    right</button>
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td style="text-align: center">
                <button id="btnbottom">
                    bottom</button>
            </td>
            <td>
            </td>
        </tr>
    </table>
    <script type="text/javascript">


        function anim(direction) {


            if (direction == "top") {

                $('#book').animate({

                    top: '-=10'

                }, 200, function () {


                        anim("top");

                });

            }

            if (direction == "left") {
                $('#book').animate({

                    left: '-=10'
                }, 200, function () {

                        anim("left");

                });
            }

            if (direction == "right") {
                $('#book').animate({

                    left: '+=10'
                }, 200, function () {

                        anim("right");

                });
            }

            if (direction == "bottom") {
                $('#book').animate({

                    top: '+=10'
                }, 200, function () {

                        anim("bottom");

                });
            }
        }


        $('#btntop').hover(function () {

            anim("top");

        });


        $('#btnleft').hover(function () {

            anim("left");

        });

        $('#btnright').hover(function () {


            anim("right");

        });

        $('#btnbottom').hover(function () {


            anim("bottom");

        });


    </script>

顶部
左边
正确的
底部
功能动画（方向）{
如果（方向=“顶部”）{
$（“#书”）。设置动画({
顶部：'-=10'
}，200，函数（）{
动画（“顶部”）；
});
}
如果（方向=“左”）{
$（“#书”）。设置动画({
左：'-=10'
}，200，函数（）{
动画（“左”）；
});
}
如果（方向=“右”）{
$（“#书”）。设置动画({
左：'+=10'
}，200，函数（）{
动画（“右”）；
});
}
如果（方向=“底部”）{
$（“#书”）。设置动画({
顶部：'+=10'
}，200，函数（）{
动画（“底部”）；
});
}
}
$（'#btntop'）。悬停（函数（）{
动画（“顶部”）；
});
$（'#btnleft'）。悬停（函数（）{
动画（“左”）；
});
$（'#btnright'）。悬停（函数（）{
动画（“右”）；
});
$（'#btnbottom'）。悬停（函数（）{
动画（“底部”）；
});

您正在调用

hover（）

上的

anim（）

函数，这不是一个好主意。将其改为

单击（）

至于第二部分，添加

$（“#book”）。停止（true）anim（）

之前，请执行以下操作：

$('#btntop').click(function () {
    $('#book').stop(true);
    anim("top");
});

$('#btnleft').click(function () {
    $('#book').stop(true);
    anim("left");
});

$('#btnright').click(function () {
    $('#book').stop(true);
    anim("right");
});

$('#btnbottom').click(function () {
    $('#book').stop(true);
    anim("bottom");
});

---

它将停止所有当前正在运行的动画并启动新的动画。

不，据我所知不是这样。看看