jquery宽度动画的闪烁边缘

Question

我正在尝试创建一个不依赖固定宽度的水平手风琴样式滑块。我的问题是:

1. 动画期间右侧列表项上的'闪烁边缘'
2. (取决于滑块的最大宽度设置)滑块中的最后一项有时会被撞到滑块的其余部分以下。

我最初的想法是，在动画过程中，所有列表项的附加宽度值必须始终等于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;}

Answer 1

除非我可以访问您的实际页面，否则我无法复制闪烁。就动画而言，我从来没有幸运地同时为两件事制作动画。我总是要做一件然后做另一件。

发生的主要是当你尝试打开和关闭每个元素的宽度超过了max-width并使其换行。

我有两个建议可以给你。

第一个是将section标记上的填充设置为0。我的例子消除了最后一个元素的跳跃，但你可以看到其他元素有一点移动。下面是我在JSFiddle中使用代码的示例。大多数情况下，JQuery动画不能很好地使用padding和margin。

第二个是将两个animate queue的值都改为true。这将允许打开的一个关闭，然后在它完成后，悬停的一个将打开。对于你想要的可能不是理想的，但它可以工作。