Question

我写了这段代码，在我的页面上动画（显示/消失）一些元素，包括我的'work'div。单击带有.fade

类的链接时会触发它

但我希望我的菜单中的其他链接在点击时，通过让“work”div渐渐消失来覆盖之前的动画，然后我可以将其带入＆amp;动画'联系'div我对工作div的方式。

HTML部分

    <div id="main">
    <h1>Hello</h1>
    <h2>This is a second heading/h2>

    <ul>
        <li><a href="#" class="fade">one</a></li>
        <li><a href="#" class="fade">two</a></li>
        <li><a href="#" class="fade">three</a></li>
    </ul>

    </div>

<div id="work">
</div>

<div id="contact">
</div>

jQuery部分

$(function(){
  $(".fade").click(function(){
     $('#main').animate({ opacity: 1, top: "12%" }, 800);   
     $('h1, h2').animate({ opacity: 0.5 }, 800);     
     document.getElementById('work').style.cssText = "display: block";
     $('#work').animate({ opacity: 0 }, 0);
     $('#work').animate({ opacity: 1, top: "350px" }, 800);
  });
});

Answer 1

为每个链接添加一个属性，说明它应该设置哪个DIV，并为所有目标DIV添加一个类：

<ul>
    <li><a href="#" class="fade" data-target="work">one</a></li>
    <li><a href="#" class="fade" data-target="contact">two</a></li>
    <li><a href="#" class="fade" data-target="something">three</a></li>
</ul>

</div>

<div id="work" class="target">
</div>

<div id="contact" class="target">
</div>

在您的jQuery中，将该数据用作DIV而不是硬编码#work。

$(function(){
  $(".fade").click(function(){
     $('#main').animate({ opacity: 1, top: "12%" }, 800);   
     $('h1, h2').animate({ opacity: 0.5 }, 800);
     var target = "#" + $(this).data("target");
     $(".target:not("+target+")").hide();
     $(target).show();
     $(target).animate({ opacity: 0 }, 0);
     $(target).animate({ opacity: 1, top: "350px" }, 800);
  });
});

看起来你正在实现标签式浏览，也许看看jQuery UI Tab小部件？

如何覆盖以前的onClick css类更改（jQuery）

1 个答案: