Javascript Jquery.animate（）不使用缓存的（全局）div

我对Jquery还比较陌生，所以如果在显示中有任何错误，请告诉我-我已经尝试尽可能使at对读者友好。如果这个问题非常简单，我也会提前道歉

我正在将我的主div id缓存为全局元素以供调用。但是，当我尝试为它们设置动画时，动画不会启动。如果我不缓存我的div，动画就可以正常工作——但我会多次调用每个div，并希望缓存它们以提高速度

以下是我的代码片段作为示例：

$(document).ready(function() {
    var $itCon = $('#it_container'),
         $webCon = $('#web_container'),
         $custCon = $('#custom_container');
         $lowCon = $('#low_container');

    $itCon.on('click', function(){
        if ($lowCon.css('display') == 'none') {
            $custCon.animate({
                 left: '12%'
                }, 600, 'easeOutQuad', function() {
                     $('#custom_container').fadeToggle(100)
                });
            $webCon.delay(500)
                .queue(function(next){
                    $(this).animate({
                        left: '45%'
                        }, 1200, 'easeOutQuad', function(){
                             $webCon.fadeToggle(100)});
                    next()});
            $lowCon.delay(1901)
                 .queue(function(next){$(this).fadeToggle(400)
                 .animate({'top': '0%'
                       }, 1000, function(){}); 
                    next()});        
        } else {
            $lowCon.animate({'top': '0%'
                       }, 1000, function(){}); 
                    next()});
            $webCon.delay(1001)
                .queue(function(next){
                    $(this).fadeToggle(400)
                        .animate({left: '0%'
                                 }, 1500, 'swing', function(){});
                        next()});
            $custCon.delay(1001)
            .queue(function(next){
                $(this).fadeToggle(400)
                    .animate({left: '0%'
                             }, 1500, 'swing', function(){});
                    next()});
        }
    });
});

谢谢你的帮助

$(document).ready(function(){
    var $itCon = $('#it_container'),
        $webCon = $('#web_container'),
        $custCon = $('#custom_container');


    $itCon.on('click', function(){
        if ($itCon.css('display') == 'none') {
            $custCon.animate({
                left: '12%'
                }, 600, 'easeOutQuad', function() {
                    $('#custom_container').fadeToggle(100)
                });
            $webCon.delay(500)
                .queue(function(next){
                    $(this).animate({
                        left: '45%'
                        }, 1200, 'easeOutQuad', function(){
                            $webCon.fadeToggle(100)});
                    next()});
        } else {
            $webCon.delay(1001)
                .queue(function(next){
                    $(this).fadeToggle(400)
                        .animate({left: '0%'
                                 }, 1500, 'swing', function(){});
                        next()});
            $custCon.delay(1001)
            .queue(function(next){
                $(this).fadeToggle(400)
                    .animate({left: '0%'
                             }, 1500, 'swing', function(){});
                    next()});
        }
    });
 });

实际发生的是因为这句话：

var $itCon = $('#it_container'),
    $webCon = $('#web_container'),
    $custCon = $('#custom_container'),

您需要将其更改为：

var $itCon = $('#it_container'),
    $webCon = $('#web_container'),
    $custCon = $('#custom_container');

出现此错误的原因是，您没有使用$itCon，而是使用onclick事件再次声明它。使用分号和冒号时要小心，因为它们有很大的区别

在代码中，还需要将末尾的2个大括号更改为：

   });
});

---

这是小提琴链接

你能提供一把小提琴吗？当然给我一点时间…在你的小提琴中，你缺少关闭功能标签

），只需注释uThanks，即）；已经添加。很抱歉，我无法理解您在这里真正想要实现的目标。您是否希望执行
if
块？因为目前似乎只有
else
块执行。再一次，我可能错了，但请帮助我理解。尼尔，谢谢你的回答，但在你提供的小提琴中，我仍然只看到fadeToggle工作-动画不工作…动画为你工作吗？是的，它工作。你只需要等一会儿，我认为你的代码很好。虽然需要一点修正。在我的实际代码中，我已经有了正确的半Collon，只是在复制时输入了错误，但即使添加了console.log（'clicked'），我仍然无法启动动画。只有fadeToggle（）和.delay（）能用。你试过小提琴吗？它有用吗？你用的是什么浏览器？