如果我将固定宽度更改为“自动"，则动画会变形 [英] if I change a fixed width to 'auto' the animation is distorted

问题描述

对于我具有跨度的框，我希望它们具有自动宽度设置，以便可以完全水平显示文本.但是如果将其更改为自动，则会损坏动画.默认情况下，宽度值为50px，因此可以正常工作.

To the boxes that I have as span, I want them to have a width auto so that the text can be shown completely horizontally. but if I change it to auto it damages my animation. by default the width value is 50px and so it works fine.

http://jsfiddle.net/31n7r699/

#horizontalScroller > span {
 position:absolute;


 width:50px;
 __width:auto;

 height:50px;
 left: -50px;
 border: 1px solid blue;
 overflow:hidden;
 display:inline-block;
 background:red;

}

推荐答案

您只需要在CSS中进行简单的更改即可.

You just need simple changes in your CSS.

#horizontalScroller > span {
    position:absolute;
    // make it width auto
    width:auto;
    // put it far far far away from the view to prevent the blink thingy at start
    left: 999px;
    border: 1px solid blue;
    background:red;
    // make it nowrap, this will prevent the span from forcing the text from being displayed in the container
    white-space: nowrap;
    // remove this, <span> are inline-block by default
    // this do not work also as this is position: absolute;
    // display: inline-block;
}

已更新:

您的解决方案之所以起作用，是因为所涉及的元素具有一致的宽度，当它们的宽度不一致时，它就会中断，因为某些句子较短而另一些句子较长时，这才是真正的意义.要解决此问题，您需要考虑将它们正确放置在各自的宽度上:

Your solution is only working because the elements involved have consistent width, it will break when they have inconsistent widths as it should it the real sense when some sentences are shorter and others are longer. To fix this issue you need to take into account on positioning them properly with their respective widths:

$(document).ready(function() {
    var container  = $("#horizontalScroller");
    var children   = $(container).children();
    var containerW = $(container).width();
    // simply the space between them
    var padding    = 10;

    for (var i = 0; i < children.length; i++)
    {
      var item  = children[i];
      var itemW = $(item).width();
      // position the first item with X = container width + padding
      var X     = containerW + padding;

      // we need to properly position the elements beside each other
      // specially if they have different widths
      // i > 0 because there is no sibling on 0
      if (i > 0)
      {
         // get the element before this
         var sibling  = children[i - 1];
         // get the siblings X and W
         var siblingX = parseInt($(sibling).css("left"));
         var siblingW = $(sibling).width();
         // position this element beside the sibling by:
         // X = sibling X + sibling W + padding
         X = siblingX + siblingW + padding;
      }

      $(item).css("left", X + "px");
      window.horizontalScroller($(item));
    }
});

然后在动画回调中，您还应该执行以下解决方案:

then in your animation callback, you should also do this solution:

$elem.animate({ left: (parseInt(left)-60) }, 900, function () {
  var currentLeft = parseInt($(this).css("left"));
  var width       = $(this).width();
  var container   = $(this).parent("#horizontalScroller");
  var containerWidth = $(container).width();

  if ((currentLeft + width) <= 0)
  {
    // instead of putting it at the end of the container
    // $(this).css("left", (containerWidth + width) + "px");
    
    // we need to put it beside the last element in the list
    var children   = $(container).children();
    // get the last item
    var lastChild  = children[children.length - 1];
    // get the lastChild X and W
    var lastChildX = parseInt($(lastChild).css("left"));
    var lastChildW = $(lastChild).width();
    var padding    = 20;
    var X          = lastChildX + lastChildW + padding;

    // position this element beside the last item
    $(this).css("left", X + "px");
    // move this element beside the last item
    // literally moving the element beside the last item in the DOM to make this solution fully functional
    $(this).insertAfter(lastChild);
}

  window.horizontalScroller($(this))
});

工作小提琴

希望有帮助，

这篇关于如果我将固定宽度更改为“自动"，则动画会变形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！