Question

I’ve created a Jquery slideshow and it is working without problem, but this thing is bugging me… As you can see I’ve created two BIG and FAT functions and they are IDENTICAL except second function is stored inside variable called animirajLogo and that variable is called inside setInteval function.

First function logoSlide(); is executed on document load and it slides ONCE all the slides and then setInteval function comes into play and continues the loop.

This is my question: Is it possible to somehow shorten my code and call function inside animirajLogo variable (to execute once) instead using two functions wich are almost IDENTICAL (only difference in second function is that it is stored inside variable and that variable is inside setInteval function).I tried naming second function and call it but it doesn’t seem to work. Thank you for your answer!!

    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

In your case, there is no difference between declaring a function:

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

And declaring a variable pointing to a function:

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

So, you should just be able to call animirajLogo like so:

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