0

注目のスライダーの関数を書き込もうとしています。

基本的に、あるページでは回転速度を 10000 に、別のページでは速度を 3000 にします。

私は2つの機能を別々に持っています-これは機能します-しかし、すべてのコードを繰り返さずにそれを行うためのよりクリーンでより良い方法があることを知っています...

誰でも助けることができますか？

$(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

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);  
    });    
});
于 2011-06-14T17:02:19.423 に答える
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 に答える
0

このソリューションの利点の 1 つは、さまざまな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 に答える