javascript - Horizontally move a div

Question

I have one HTML Page I want in that HTML page I can move some divs horizontally when I click on some link...

Like

1       2        3        4        5         6         7
__________________________________________________________________











___________________________________________________________________

In between those line the 7 number of divs shows one by one when i click Particular Link & it will come from right side to left side...

<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を使用し、データ属性を使用してそれらをターゲットdivに結び付けることができます。要素がクリックされると、左または右にアニメーション化し、それらの引数を渡すことで不透明度を変更できます。

ソース

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

ドム

<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 3

特定のアクションで特定の方法で実行/移動/動作するように、これらの div を「アニメーション化」したい場合があるようです。これを見て、それが役立つかもしれません。