Question

我正在尝试为精选滑块编写一个函数。

基本上，在一个页面上我希望旋转速度为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);  
    }
  );   
}

Answer 1

试试这个：

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

Answer 2

此解决方案的一个好处是，您可以添加任意数量的不同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);  
        }
      );    
  }
});

Answer 3

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

jQuery - 如果body有一个X类，那么将滑块的旋转速度更改为X.

3 个答案: