Javascript 如果我将固定宽度更改为'；自动'；动画被扭曲了_Javascript_Jquery_Css

Javascript 如果我将固定宽度更改为'；自动'；动画被扭曲了

javascript jquery css

Javascript 如果我将固定宽度更改为'；自动'；动画被扭曲了,javascript,jquery,css,Javascript,Jquery,Css,对于作为span的框，我希望它们具有自动宽度，以便文本可以完全水平显示。但如果我将其更改为“自动”，则会损坏我的动画。默认情况下，宽度值为50px，因此工作正常您只需要在CSS中进行简单的更改 #horizontalScroller > span { position:absolute; // make it width auto width:auto; // put it far far far away from the view to preven

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

您只需要在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;
}

#水平滚动条>span{
位置：绝对位置；
//让它自动宽度
宽度：自动；
//将其放在远离视图的地方，以防止在开始时闪烁
左：999px；
边框：1px纯蓝色；
背景：红色；
//使其为nowrap，这将防止跨度强制文本显示在容器中
空白：nowrap；
//删除此项，默认情况下为内联块
//这不起作用，因为这是位置：绝对；
//显示：内联块；
}

更新：

您的解决方案之所以有效，是因为所涉及的元素具有一致的宽度，当它们具有不一致的宽度时，它将中断，因为当某些句子较短而其他句子较长时，它应该是真正意义上的。要解决此问题，您需要考虑将其正确定位为各自的宽度：

$(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));
    }
});

$（文档）.ready（函数（）{
变量容器=$（“#水平滚动条”）；
var children=$（container.children（）；
var containerW=$（container）.width（）；
//只是他们之间的空间
var=10；
对于（变量i=0；i0，因为0上没有兄弟姐妹
如果（i>0）
{
//在此之前获取元素
var同胞=子女[i-1]；
//得到兄弟姐妹X和W
var siblingX=parseInt（$（sibling.css（“左”）；
var siblingW=$（同级）.width（）；
//通过以下方式将此元素放置在同级旁边：
//X=同级X+同级W+填充
X=同级X+同级W+填充；
}
$（项目）.css（“左”，X+“px”）；
window.horizontalScroller（$（项目））；
}
});

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

$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))
});

$elem.animate（{left:（parseInt（left）-60）}，900，函数（）{
var currentlleft=parseInt（$（this）.css（“left”）；
var width=$（this.width（）；
var container=$（this.parent（#horizontalScroller”）；
var containerWidth=$（container）.width（）；
如果（（currentLeft+width）您只需要在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;
}

#水平滚动条>span{
位置：绝对位置；
//让它自动宽度
宽度：自动；
//将其放在远离视图的地方，以防止在开始时闪烁
左：999px；
边框：1px纯蓝色；
背景：红色；
//使其为nowrap，这将防止跨度强制文本显示在容器中
空白：nowrap；
//删除此项，默认情况下为内联块
//这不起作用，因为这是位置：绝对；
//显示：内联块；
}

更新：
您的解决方案之所以有效，是因为所涉及的元素具有一致的宽度，当它们具有不一致的宽度时，它将中断，因为当某些句子较短而其他句子较长时，这才是真正意义上的解决方案。要解决此问题，您需要考虑将它们正确定位为各自的宽度：
$(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));
    }
});

$（文档）.ready（函数（）{
变量容器=$（“#水平滚动条”）；
var children=$（container.children（）；
var containerW=$（container）.width（）；
//只是他们之间的空间
var=10；
对于（变量i=0；i0，因为0上没有兄弟姐妹
如果（i>0）
{
//在此之前获取元素
var同胞=子女[i-1]；
//得到兄弟姐妹X和W
var siblingX=parseInt（$（sibling.css（“左”）；
var siblingW=$（同级）.width（）；
//通过以下方式将此元素放置在同级旁边：
//X=同级X+同级W+填充
X=同级X+同级W+填充；
}
$（项目）.css（“左”，X+“px”）；
window.horizontalScroller（$（项目））；
}
});

然后在动画回调中，还应执行以下解决方案：
$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))
});

$elem.animate（{left:（parseInt（left）-60）}，900，函数（）{
var currentlleft=parseInt（$（this）.css（“left”）；
var width=$（this.width（）；
var container=$（this.parent（#horizontalScroller”）；
var containerWidth=$（container）.width（）；
如果（（当前左+宽度）类似这样的东西，你也可以调整高度，也许可以将其设置为auto
tooIt's working罚款me@Risa__B更改宽度：50px宽度：auto@NarenMurali看，我有一个problem@yavg你能用我给你的小提琴复制这个问题吗？和我分享新的小提琴吗？像这样的东西你也可以调整高度，也许可以设定这到auto
too它的工作正常me@Risa__B更改宽度：50px宽度：auto@NarenMurali看，我有一个problem@yavg你能用我给你的小提琴复制这个问题吗？和我分享新的小提琴吗？再次感谢，但当完成第四个跨度时（我将提前告诉你，这只是工作，因为它们有一致的宽度。在实际意义上，解决方案不起作用。为什么？考虑已经出现在视图X +项W＜0代码>但<代码>的文本。