生成动画就好像它是一个选取框

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