Question

我需要缓存大约100种不同的动画选择。以下是示例代码。第二个示例中是否存在语法问题？如果这不是缓存选择的方式，那么它肯定是互联网上最受欢迎的。那么，我错过了什么？

注意：下面的$.path.bezier(p)中的 p 是传递给jQuery.path.bezier的正确声明的对象（顺便说一下，这是一个很棒的动画库）

有效

    $(document).ready(function() {
        animate1();
        animate2();
    })
    function animate1() {
        $('#image1').animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate1()", 3000);
    }
    function animate2() {
        $('#image2').animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate2()", 3000);
    }

不起作用

    var $one = $('#image1'); //problem with syntax here??
    var $two = $('#image2');
    $(document).ready(function() {
        animate1();
        animate2();
    })
    function animate1() {
        $one.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate1()", 3000);
    }
    function animate2() {
        $two.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate2()", 3000);
    }

Answer 1

如果在调用图像时未加载图像，jQuery将返回一个空对象。在document.ready函数中移动作业：

$(document).ready(function() {
    var $one = $('#image1');
    var $two = $('#image2');
    animate1();
    animate2();
});
// ... etc.

如果您需要将它们缓存以供以后在初始化脚本之外使用，请将它们添加到存储对象：

var my_storage_object = {};
$(document).ready(function() {
    var $one, $two;
    my_storage_object.$one = $one = $('#image1');
    my_storage_object.$two = $two = $('#image2');
    animate1();
    animate2();
});
// ... etc.

然后，在document.ready之外，您可以致电：

my_storage_object.$one //still has a reference to the jQuery object.

Answer 2

   var one = $('#image1');
   var two = $('#image2');
    $(document).ready(function() {
        animate1();
        animate2();
    })
    function animate1() {
        one.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate1()", 3000);
    }
    function animate2() {
        two.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate2()", 3000);
    }

修复

当你这样做时：

   var one = $('#image1');

您将选择器返回的jquery对象存储在var“one”中。所以你不需要再使用$了。

Answer 3

变量声明也应该在外面，但是选择器应该在$（document）.ready（）里面，也许那些图像还没有准备就绪呢？

编辑，像这样：

var one;
var two;
$(document).ready(function() {
     one = $('#image1');
     two = $('#image2'); 
     animate1();
     animate2();
})

Answer 4

试试这个：

var $one;
var $two;
$(document).ready(function() {
    $one = $('#image1');
    $two = $('#image2');
    animate1();
    animate2();
})
function animate1() {
    $one.animate({ path: new $.path.bezier(p) }, 3000);
    setTimeout("animate1()", 3000);
}
function animate2() {
    $two.animate({ path: new $.path.bezier(p) }, 3000);
    setTimeout("animate2()", 3000);
}

变量在全局范围内定义，但选择器在文档准备好时执行。

Answer 5

你的jQuery选择器总是需要在.ready()块内，所以为什么不把一切放在那里？这样你就不会在全球范围内留下任何东西。

$(document).ready(function() {
    var storedGlobals = {
        $one: $('#image1'),
        $two: $('#image2')
    };
    animate1(); 
    animate2(); 

    function animate1() { 
        storedGlobals.$one.animate({ path: new $.path.bezier(p) }, 3000); 
        setTimeout("animate1()", 3000); 
    } 
    function animate2() { 
        storedGlobals.$two.animate({ path: new $.path.bezier(p) }, 3000); 
        setTimeout("animate2()", 3000); 
    }
});

如何缓存jQuery选择？

5 个答案: