javascript - 水平移动一个div

Question

我在那个 HTML 页面中有一个我想要的 HTML 页面，当我单击某个链接时，我可以水平移动一些 div...

喜欢

1       2        3        4        5         6         7
__________________________________________________________________











___________________________________________________________________

在这些行之间，当我单击特定链接时，7 个 div 将一一显示，它将从右侧到左侧...

<div>
 <ul> 
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>
</div>

Answer 1

你可以试试 jQuery 手风琴：http: //jqueryui.com/accordion/

Answer 2

您可以为每个 li 使用 jQuery animate 并使用 data 属性将它们绑定到您的目标 div。单击元素时，您可以向左或向右设置动画，并通过传递这些参数来更改不透明度。

资源

http://api.jquery.com/animate/

DOM

<ul>
    <li data-target='your-target-div'>
    ...
</ul>
<div id='your-target-div'></div>

脚本

$('ul li').each(function(){
    $(this).click(function(){
        target = '#'+$(this).data('target');
        $(target).animate({ 
            // ENTER YOUR ANIMATION FOR DIV 
        }, 2000);
    });
});

Answer 3

似乎您可能希望“动画化”这些 div 以在某个动作上以某种方式执行/移动/行为。看看这个可能会有所帮助。