在jQuery寬度動畫上閃爍的邊緣

我想創建一個不依賴於固定寬度的水平手風琴風格的滑塊。我的問題是：在jQuery寬度動畫上閃爍的邊緣

動畫期間在右側列表項「忽隱忽現邊緣」
（取決於滑塊的最大寬度集）在滑塊的最後一個項目，有時敲其餘下方的滑塊。

我最初的想法是，在動畫期間，所有列表項的添加寬度值必須始終等於100％，但我沒有關於如何強制執行此操作的想法。

...我已經尋找類似的問題在網上沒有運氣，所以任何幫助或想法，將不勝感激。

，這裏是我的jQuery簡化（道歉任何明顯的錯誤，我還在學習）：

(function($) { 

$.fn.horizontalSlider = function(options) { 

var defaults = { 
    openWidth: 65, // Initial list item width 
    delay: 500, // Delay before items open 
    easing: 'linear' // Type of easing for animation 
}; 

var options = $.extend(defaults, options); 

return this.each(function() { 

    // Variables   
    var listItems = $(this).children('li'); // Select children 
    var articles = listItems.children('article'); // Select articles 
    var listNum = listItems.size(); // Count list items 
    var openWidth = options.openWidth; // Width of open item 
    var closedWidth = (100 - openWidth)/(listNum - 1); // Width of closed item 

    // Close all but first item 
    listItems.css({ 
    'width': closedWidth + '%', 
    'float': 'left', 
    'overflow': 'hidden' 
    }).first().addClass('open').css({ 
    'width': openWidth + '%' 
    }); 

    var articleWidth = listItems.first().width(); // Width of content hidden by item 

    // Set width of articles within each item 
    $(this).find('article').css({'width': articleWidth}); 

    listItems.mouseenter(function() { 

    // Set variable for current list item 
    var currentItem = $(this); 

     if (currentItem.hasClass('open')) { /* Do nothing */ } 
     else { 
     hoverTimeout = setTimeout(function() { 

      // Slide closed open list items 
      listItems.removeClass('open') 
      .animate({ 
      'width': closedWidth + '%' 
      }, { duration: 800, easing: options.easing, queue: false }); 

      currentItem.addClass('open') 
      .animate({ 
       'width': openWidth + '%' 
      }, { duration: 800, 
       queue: false, 
       easing: options.easing, 
       complete: function() { /* Callback function */ } 
      }); 
     }, options.delay); 
    } 
    }); 

    listItems.mouseleave(function() { 
    if(window.hoverTimeout) { 
     clearTimeout(hoverTimeout); 
    }; 
    });  

}); 
}; 

})(jQuery);

我的HTML：

<script type="text/javascript"> 
    $(document).ready(function() { 
    $('.horizontalSlider').horizontalSlider(); 
    }); 
</script> 

<section> 
    <ul class="horizontalSlider cf"> 
    <li> 
     <article> 
     <img src="image1" /> 
     </article> 
    </li> 
    <li> 
     <article> 
     <img src="image2" /> 
     </article> 
    </li> 
    <li> 
     <article> 
     <img src="image3" /> 
     </article> 
    </li> 
    <li> 
     <article> 
     <img src="image4" /> 
     </article> 
    </li> 
    </ul><!-- /.horizontalSlider --> 
</section>

和css：

img {max-width: 100%;} 
section {display: block; max-width: 1000px; padding: 10px; margin: 60px auto; background: #ccc;}

來源

2011-12-13 gethyn1

除非我有權訪問您的實際頁面，否則我無法複製閃爍。就動畫而言，我從來沒有任何運氣一次爲兩件事動畫。我一直需要做另一個。

主要發生了什麼是寬度，當你試圖打開和關閉每個元素超過了最大寬度，並使其包裹。

我有兩個建議，我可以給你。

第一種是填充設置爲0的部分標記。我的例子消除了最後一個元素跳躍，但你可以看到其他元素移動一點點。這裏是我的例子，你的代碼在JSFiddle。大多數情況下，jQuery動畫在填充和邊距方面效果並不理想。

二是改變有生命隊列的是真實的。這將允許開放的一個關閉，然後在其完成後，將打開一個。不適合你可能要找的東西，但它的工作原理。

來源

2012-01-31 14:43:24 Henesnarfel

在jQuery寬度動畫上閃爍的邊緣

回答

相關問題