0

I wrote this code which animates (makes appear/disappear) a few elements on my page, including my 'work' div. It's triggered when clicking the link with class .fade

But I want that the others links of my menu, when clicked, override previous animation by making 'work' div fade away, then I can bring on & animate 'contact' div the way I did for the work div.

HTML part

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

$(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);
  });
});
4

1 回答 1

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 而不是 hard-coding #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 小部件？

于 2013-06-17T16:28:16.007 回答