生成動畫就好像它是一個選取框

Question

我對css瞭解不多，但我認爲這段代碼可以幫助我生成一個選取框。基本上我想要用盒子完成的動畫，用文本來完成。

我的主要問題發生在動畫中，它不是很流暢，我希望它更流暢，它從容器的末端開始到左側。我該怎麼做？我會很感激。

http://jsfiddle.net/joof5dhx/

<div id="horizontalScroller"> 
<div>it is a message a little more of 100 characteres</div> 
<div>it is a message a little more of 110 characteres</div> 
<div>it is a message a little more of 120 characteres</div> 
<div>it is a message a little more of 130 characteres</div> 
</div> 

window.horizontalScroller = function($elem) { 
    var left = parseInt($elem.css("left")); 
    var temp = -1 * $('#horizontalScroller > div').height(); 
    if(left < temp) { 
     left = $('#horizontalScroller').height() 
     $elem.css("left", left); 
    } 
    $elem.animate({ left: (parseInt(left)-60) }, 900, function() { 
     window.horizontalScroller($(this)) 
    }); 
} 


$(document).ready(function() { 
    var i = 0; 
    $("#horizontalScroller > div").each(function() { 
      $(this).css("left", i); 
      i += 60; 
      window.horizontalScroller($(this)); 
    }); 
}); 

http://jsfiddle.net/hhcbtyyg/

Answer 1

你只可以：

window.horizontalScroller = function($elem) 
{ 
    var left = parseInt($elem.css("left")); 

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

     // check if the element goes out of the view item X + item w < 0 
     if ((currentLeft + width) <= 0) 
     { 
     // put it on the opposite side: simply container w + item w 
     $(this).css("left", (containerWidth + width) + "px"); 
     } 

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

我只是不明白，爲什麼你在上面代碼中使用height。如果有什麼我不知道的讓我知道。

更新：

爲了使項目在默認情況下在最左邊的出現：

$(document).ready(function() { 
    var container = $("#horizontalScroller"); 
    var children = $(container).children(); 
    var containerW = $(container).width(); 

    // Loop through each item of container 
    for (var i = 0; i < children.length; i++) 
    { 
     var item = children[i]; 
     var itemW = $(item).width(); 
     // this is simply the space between them, remove if you don't need it 
     var padding = 10 * (i + 1); 

     // simply: padding + Container Width + (Item Width * (i + 1)) 
     // (Item Width * (i + 1)) because you need to position each element beside each other. 
     $(item).css("left", (padding + containerW + itemW * (i + 1)) + "px"); 
     window.horizontalScroller($(item)); 
    } 
}); 

your updated fiddle

希望幫助

Answer 2

嗨選中此版本的的jsfiddle的，我做了一些modificaitons，因爲你的動畫無論從任何高度開始的值是您的DIV了。檢查這個我試圖匹配你的css和寬度在你的css的高度，我只注意到你的js中的「左」var獲取你的元素的高度。

CSS：

#horizontalScroller { 
position: absolute; 
width:300px; 
height: 300px; 
border: 1px solid red; 
overflow: hidden; 
} 

也許你能得到一些提示如何完成它的響應方式。 JSFIDDLE