-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 回答