Question

我已经创建了一个Jquery幻灯片，它没有问题，但这件事让我烦恼......你可以看到我创建了两个 BIG 和 FAT 函数，它们是 IDENTICAL ，除了第二个函数存储在名为 animirajLogo 的变量中，该变量在 setInteval 函数内调用。

第一个功能logoSlide（）;在文档加载时执行，它会滑动 ONCE 所有幻灯片，然后 setInteval 功能开始播放并继续循环。

这是我的问题：是否有可能以某种方式缩短我的代码并调用 animirajLogo 变量（执行一次）中的函数，而不是使用两个几乎是IDENTICAL的函数（只有第二个函数的区别在于它存储在变量中并且该变量在setInteval函数内。）我尝试命名第二个函数并调用它但它似乎不起作用。谢谢你的回答!!

    var animirajLogo;
    function logoSlide()
    {
    $('.logo').delay(2000).animate({opacity:1},2000);
    $('.wordslider').delay(6000).animate({width:'451px'},2000,function(){
    $('.boost').delay(1000).stop().animate({marginLeft:'+=436'},2000);
    $('.logo').delay(9000).animate({opacity:0},2000,function(){
    $('.logo').addClass('logo2');
    $('.logo2').removeClass('logo');
    $('.wordslider').css({width:'0'})
    $('.boost').css({marginLeft:'-=436'})
    $('.logo2').delay(1000).animate({opacity:1},2000);
    $('.wordslider').delay(4000).animate({width:'451px'},2000,function(){
    $('.boostlevel').delay(1000).animate({marginLeft:'+=390'},2000,function(){
    $('.logo2').delay(5000).animate({opacity:0},2000,function(){
    $('.logo2').addClass('logo3');
    $('.logo3').removeClass('logo2');
    $('.wordslider').css({width:'0'})
    $('.boostlevel').css({marginLeft:'-=390'})
    $('.logo3').delay(2000).animate({opacity:1},2000);

    if ($('.logo3').is($('.logo3'))){
    $('.logo3').delay(10000).animate({opacity:0},2000,function(){
    $('.logo3').addClass('logo');
    $('.logo3').removeClass('logo3');

    });

    }
    });

    });

    });
    });
    });

    }

   animirajLogo=function()
   {
   $('.logo').delay(2000).animate({opacity:1},2000);
   $('.wordslider').delay(6000).animate({width:'451px'},2000,function(){
   $('.boost').delay(1000).stop().animate({marginLeft:'+=436'},2000);
   $('.logo').delay(9000).animate({opacity:0},2000,function(){
   $('.logo').addClass('logo2');
   $('.logo2').removeClass('logo');
   $('.wordslider').css({width:'0'})
   $('.boost').css({marginLeft:'-=436'})
   $('.logo2').delay(2000).animate({opacity:1},2000);
   $('.wordslider').delay(4000).animate({width:'451px'},2000,function(){
   $('.boostlevel').delay(1000).animate({marginLeft:'+=390'},2000,function(){
   $('.logo2').delay(5000).animate({opacity:0},2000,function(){
   $('.logo2').addClass('logo3');
   $('.logo3').removeClass('logo2');
   $('.wordslider').css({width:'0'})
   $('.boostlevel').css({marginLeft:'-=390'})
   $('.logo3').delay(2000).animate({opacity:1},2000);

   if ($('.logo3').is($('.logo3'))){
   $('.logo3').delay(10000).animate({opacity:0},2000,function(){
   $('.logo3').addClass('logo');
   $('.logo3').removeClass('logo3');

   });

   }




  });

  });

  });
  });
  });

  }

  $(document).ready(function(){
  logoSlide();
  setInterval(animirajLogo,51500)
  });

Answer 1

在您的情况下，声明function：

之间没有区别

function foo() { alert('foo'); }
foo();

声明一个指向函数的变量：

var bar = function() { alert('bar'); }
bar();

所以，你应该能够这样调用animirajLogo：

$(document).ready(function(){
  animirajLogo();
  setInterval(animirajLogo, 51500);
});

幻灯片代码可重用性

1 个答案: