Search code examples
jqueryslider

jQuery - if body has a class of X then change rotation speed of slider to X


I'm trying to write a function for featured slider.

Basically, on one page I want the rotate speed to be 10000 and on another page I want the speed to be 3000.

I have the two functions separately - which works - but i know there would be a cleaner/better way of doing it without repeating all the code...

Can anyone help?

$(function(){
  $("body.homePage #featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 10000, true);  
  $("body.homePage #featured").hover(  
    function() {  
      $("body.homePage #featured").tabs("rotate",0,true);
    },  
    function() {  
      $("body.homePage #featured").tabs("rotate",10000,true);  
    }
  );    
});

$(function(){
  $("body.boatDetailsPage #featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 3000, true);  
  $("body.boatDetailsPage #featured").hover(  
    function() {  
      $("body.boatDetailsPage #featured").tabs("rotate",0,true);
    },  
    function() {  
      $("body.boatDetailsPage #featured").tabs("rotate",3000,true);  
    }
  );    
});

Something like

if ($('body').hasClass('homePage')) {
  $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 10000, true);  
  $("#featured").hover(  
    function() {  
      $("#featured").tabs("rotate",0,true);
    },  
    function() {  
      $("#featured").tabs("rotate",10000,true);  
    }
  );   
} else { 
  $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 3000, true);  
  $("#featured").hover(  
    function() {  
      $("#featured").tabs("rotate",0,true);
    },  
    function() {  
      $("#featured").tabs("rotate",3000,true);  
    }
  );   
}

Solution

  • Try this:

    $(function(){
        // if body has class X speed will be 10000, else 3000
        var rotateSpeed = $("body").hasClass('X') ? 10000 : 3000;
    
        $("body.boatDetailsPage #featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", rotateSpeed, true);  
        $("body.boatDetailsPage #featured").hover(  
        function() {  
        $("body.boatDetailsPage #featured").tabs("rotate",0,true);},  
        function() {  
        $("body.boatDetailsPage #featured").tabs("rotate",rotateSpeed,true);  
        });    
    });