Question

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

动画期间右侧列表项上的“闪烁边缘”
（根据滑块设置的最大宽度），滑块中的最后一项有时会被撞到滑块的其余部分下方。

我最初的想法是，在动画期间，所有列表项的添加宽度值必须始终等于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

除非我可以访问您的实际页面，否则我无法复制闪烁。就动画而言，我从来没有运气动画两件事。我总是不得不做另一个。

主要是发生的事情是，当您尝试打开和关闭每个元素时的宽度超过最大宽度并使其换行。

我有两条建议可以给你。

第一种是在section标签上将填充设置为0。我的例子消除了跳跃的最后一个元素，但你可以看到其他元素移动了一点点。以下是我在JSFiddle处使用您的代码的示例。在大多数情况下，JQuery动画在填充和边距方面效果不佳。

第二种方法是将两个动画队列都改为true。这将允许打开一个关闭，然后在完成之后将打开一个打开的。不适合你可能正在寻找的东西，但它有效。

jquery宽度动画上的闪烁边缘

1 个答案: