jQuery - если тело имеет класс X, измените скорость вращения ползунка на X - PullRequest
Новая
       14

jQuery - если тело имеет класс X, измените скорость вращения ползунка на X

0 голосов
/ 14 июня 2011

Я пытаюсь написать функцию для показанного слайдера.

По сути, на одной странице я хочу, чтобы скорость вращения была 10000, а на другой странице я хочу, чтобы скорость была 3000.

У меня есть две функции по отдельности - что работает - но я знаю, что был бы более чистый / лучший способ сделать это без повторения всего кода ...

Кто-нибудь может помочь? 

$(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);  
    }
  );    
});

Что-то вроде 

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);  
    }
  );   
}

Ответы [ 3 ]

2 голосов
/ 14 июня 2011

Попробуйте это: 

$(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);  
    });    
});
0 голосов
/ 14 июня 2011 
function rotateBehavior(selector, time){
    $(selector)
      .tabs({fx:{opacity: "toggle"}}) 
      .hover(  
          rotateMe(selector, 0),  
          rotateMe(selector, time)
      );

    rotateMe(selector, time);
}

function rotateMe(selector, time){
    $(selector).tabs("rotate", time,true);
}

$(function(){
    var time = $('body').hasClass('homePage') ? 10000 : 3000;
    var selector = '#featured';
    rotateBehavior(selector, time);
});
0 голосов
/ 14 июня 2011

Одним из преимуществ этого решения является то, что вы можете добавить любое количество различных body классов для проверки и применить различные длительности анимации к каждому 

$(function(){
  var duration = 0;
  var $body = $('body');
  var $featured = $body.find('#featured');

  if($body.is('.homePage')) {
    duration = 10000;
  } else if($body.is('.boatDetailsPage')) {
    duration = 3000;
  } 

  if(duration > 0) {        
    $featured
      .tabs({fx:{opacity: "toggle"}})
      .tabs("rotate", duration, true)
      .hover(  
        function() {  
          $featured.tabs("rotate",0,true);
        },  
        function() {  
          $featured.tabs("rotate",duration,true);  
        }
      );    
  }
});
...