jQuery UI：從右向左動畫

我有一個從右到左的jQuery動畫問題。我的JS代碼如下所示：jQuery UI：從右向左動畫

$('.tabs').each(function(index){ 
    $(this).click(function(event){ 
     $('.tabs').css('left', '1410px').removeClass('open'); 
     $('.blocks').css('width', '0px'); 
     $('.blocks').css('left', '1385px'); 
     $(this).animate({left: '1397px'}, 200).addClass('open'); 
     $('.blocks').eq(index).animate({left: '520px'}, 2500);   
     }); 
    });

，你可以在我的小提琴演示中看到的其餘代碼：http://jsfiddle.net/DM346/5/

正如你看到它的動畫正確（從右到左），但整個文本塊是透明的（我知道它是因爲我將寬度設置爲0，但我必須這樣做，因爲以其他方式它會彈出按鈕）。

我想達到這樣的效果：http://jsfiddle.net/6dwvs/19/ 但從右到左，如我的例子。有人可以幫忙嗎？基本上問題是文本塊的「不可見性」。

來源

2013-11-03 L3M0L

你的代碼很難調試。你能否至少減少-scale-數字以適應jsfiddle屏幕？ –

我更新了我的小提琴代碼。現在看看:) – L3M0L

有沒有其他想法？ – L3M0L

我會用z-index的妥善安放容器，FIDDLE

地址：

#tabs-cont { 
    overflow:hidden; 
    z-index:20; 
} 

.blocks { 
    z-index:-1; 
}

包裹在一個div

<div id="tabs-cont"> 
    <div class="tabs" id="tab1">HOME</div> 
    <div class="tabs" id="tab2">VIDEO</div> 
    <div class="tabs" id="tab3">TEXT</div> 
    <div class="tabs" id="tab4">CONTACT US</div> 
    <div class="tabs" id="tab5">HELP</div> 
</div>

標籤和更改JS來：

$(document).ready(function() { 
    $('.tabs').each(function (index) { 
     $(this).click(function (event) { 
      $('.tabs').css('left', '895px').removeClass('open'); 
      $('.blocks').css('left', '875px'); 
      $('.blocks').css('width', '865px'); 
      $(this).animate({ 
       left: '875px' 
      }, 200).addClass('open'); 
      $('.blocks').eq(index).animate({ 
       left: '0px' 
      }, 2500); 
     }); 
    }); 
});

來源

2013-11-03 23:27:41 feitla

謝謝，但我已經用z-index測試了它...它可以工作，但它不是100％我想要的，因爲你可以在按鈕後面看到它：/但如果沒有其他選項，我將把它留在那裏。 – L3M0L

在這裏，我打印的屏幕，它實際上看起來如何： http://gyazo.com/ed878b6a3a460edb69b8c06336302aa8.png 你看？ z-index的東西並沒有像我想要的那樣好：/ – L3M0L

嗯，這是一種拙劣的方法。你真正需要做的是將所有'div'的內容設置爲'display：none'，然後添加一個類來切換可見性，而所有其他的都從視圖中隱藏 – feitla

我想出瞭如何解決這個問題！我使用jQuery的step（）函數animate（）:) var time = 2500;

var blockWidth = 0; 
    $('.blocks').eq(index).css('width', '0px'); 
    $('.blocks').eq(index).animate(
    { 
    left: '520px' 
    }, 
    { 
     duration: time, 
     step: function(test){ 
      if(blockWidth < 865) 
      { 
       console.log("blockWidth: ", blockWidth); 
       blockWidth +=6; 
      }     
      $('.blocks').eq(index).css('width', blockWidth); 
     } 
    } 
    );

現在它完美的工作！ :)

來源

2013-11-04 01:43:48 L3M0L

jQuery UI：從右向左動畫

回答

相關問題