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

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

<强>来源

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

<强> DOM

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

<强> JAVSCRIPT

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

Answer 2

您可以尝试使用jQuery手风琴：http://jqueryui.com/accordion/

Answer 3

似乎你可能想要“动画化”这些div来对某个动作以某种方式进行/移动/表现。看看this它可能会有所帮助。

水平移动div

3 个答案: