-1

2 つの div のアニメーションを作成したいのですが、うまくいきません :(.

DIV Tablou を左に移動し、DIV Frame1、Frame2 などを表示したいのですが、リンクをクリックするたびに Tablou DIV が左に移動します。これまでのところ、フレームが表示され、DIV Tablou が左に移動することに成功しています。

問題は、DIV Tablou を左に移動してそこにとどめ、[閉じる] ボタンをクリックして元の位置に右に移動するにはどうすればよいですか?? どうもありがとう

HTML:

<div id="tablou"  onclick="move_left()">
  <div id="logo"></div>
    <div id="menu">
     <ul>
      <li><a href="javascript:show('frame1');" class="categories">Main</a></li>
      <li><a href="javascript:show('frame2');" class="categories">About Us</a></li>
     </ul>
    </div>


<div name="frames" id="frame1"> Frame 1 </div>

<div name="frames" id="frame2"> Frame 2 </div>

私が使用しているスクリプト：

function show(currentframe) {
     $('div[name|="frames"]').each(function(index) {
          if ($(this).attr("id") == currentframe) {
               $(this).show(200);      
          }
          else {
               $(this).hide(600);
          }
     });
}
function move_left() {
    $('#tablou').animate({
        'marginLeft' : "-=250px"
    });
}
4

1 に答える 1

2

関数showでは、イベントのバブリングを停止する必要がありますが、そのようなイベントリスナーをアタッチしている限り、それを行うことはできません。より現代的なものを使用してください。あなたがjQueryを使用していることがわかったので、次のようなものを試してください：

HTML コード:

<div id="menu">
  <ul>
    <li><a href="#" id="main" class="categories">Main</a></li>
    <li><a href="#" id="aboutus" class="categories">About Us</a></li>
  </ul>
</div>

Javascript:

$("#main").click(function(e) {
    // This prevents that the event bubbles up to #tablou
    e.stopPropagation();
    // This prevents that clicking on the link adds # to the url
    e.preventDefault();
    show("frame1");
});
$("#aboutus").click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    show("frame2");
});
于 2012-06-04T09:46:07.687 に答える