Question

我对Jquery很新，所以如果显示有任何错误，请告诉我 - 我尽量让读者友好。如果这个问题最终非常简单，我也会提前道歉。

我正在缓存我的主要div id作为回调的全局元素。然而，当我尝试动画它们时，动画不会触发。如果我不缓存我的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()});
        }
    });
});

感谢您的帮助！

Answer 1

$(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事件再次声明它。你需要小心使用分号和冒号，因为它们有很大的不同。

并且在您的代码中，您需要将最后的两个花括号更改为：

   });
});

这是小提琴链接{{3}}

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

1 个答案: