固定幅を 'auto'に変更するとアニメーションが歪んでいます

Question

私がスパンとして持っているボックスに、テキストを完全に水平に表示できるように幅をautoにします。私がそれをautoに変更すると、私のアニメーションが損なわれます。デフォルトでは幅の値は50ピクセルなので、うまく動作します。

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; 

} 

Answer 1

あなたは自分の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; 
} 

更新日：

あなたのソリューションであるだけ関与の要素は、一貫性の幅を持っているので、それはいくつかの文章が短く、それ本当の意味なければならないときに他の人が長くなっているとして、彼らは一貫性のない幅を持っている場合、それが壊れる作業。あなたは彼らのそれぞれの幅を適切に配置する上で考慮に入れる必要があり、この問題解決するには：

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

working fiddle

：アニメーションのコールバックで、その後

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

を、あなたもこのソリューションを行う必要があります

ほんとに助けてください