Question

不久前，我必须处理简单的工作：将两个元素组合在一起，根据第一个元素移动移动第二个元素。不是问题：使用步骤选项的 .animate（）非常好，我甚至让它工作了。当我试图将我的代码从测试页面注入真实站点时，麻烦就开始了。我澄清说只有.animate（）的主要部分被执行， step 选项指向的函数甚至没有被执行。原因是链接到名为 interface.js 的文档脚本（http://interface.eyecon.ro）它用于创建一些元素，如鱼眼面板在我的情况下。只是一个链接（脚本类型=“text / javascript”src =“...”等）到这个脚本“杀死”动画（它的第二部分，步骤功能），即使没有调用它（ interface.js）函数。为了说明问题，我准备了一个小例子：2个红色框位于矩形的对角，点击它们开始动画，交换它们的位置。

HTML：

<div id="container">
    <div id="div1" class="box"></div>
    <div id="div2" class="box"></div>
</div>

CSS :(抱歉丑陋的无选择“CSS”-syntax，这是我的第一篇文章，CSS在真实文件中是正确的）

container-id-selector
{
    width: 500px; height: 100px; position: relative;
}
div1-id-selector
{
    background-color: red; width: 50px; height: 50px;
    position: absolute;     left: 0px;
}
div2-id-selector
{
    background-color: red; width: 50px;
    height: 50px; position: absolute;
    top: 50px; right: 0px;
}
box-class-selector
{
    cursor: pointer;
}

JavaScript的：

$(document).ready(function() {
        $(".box").click(function(){
            $("#div1").animate({ left: 450}, {
        duration: 2000,
        step: function(now, fx){
            $("#div2").css("left", 450 - now);
            }
        });
        });
     });

此示例完美无缺，但如果只添加一行：

<script type="text/javascript" src="interface.js"></script>

杀死动画:(只有第一个框从左向右移动，第二个框根本没有移动，只是因为步骤指向的功能不是在调用。只需包括这个文件（界面） .js），甚至没有调用它的功能。有没有人知道这种问题的原因？我真的想知道这种奇怪行为的内在原因，以及解决它的方法。任何想法？:)非常感谢！

P.S。在开发人员的网站上有一个非最小化版本的此脚本，但我的js＆amp; jquery技能太差，无法进行详细调查。再次感谢，对于这么多信件感到抱歉，我真的很困惑这个问题:(

使用步骤选项的jQuery .animate（）的神秘麻烦

0 个答案: