0

我正在尝试为特色滑块编写一个函数。

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

3 回答 3

2

试试这个：

$(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);  
    });    
});
于 2011-06-14T17:02:19.423 回答
0

此解决方案的好处之一是您可以添加任意数量的不同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);  
        }
      );    
  }
});
于 2011-06-14T17:08:59.170 回答
0 
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);
});
于 2011-06-14T17:29:48.543 回答