2

我是这个 jquery 业务的新手——如果你能在心里原谅我和我无知的问题，我将不胜感激。

我的困境：我有两个 div，我需要一个在另一个淡入之前淡出。

这是我的代码：

<script type="text/javascript">
  $(document).ready(
    function(){
        $("#about").click(function () {
            $("#aboutinfo").fadeToggle();
        });
    });
</script>
    <script type="text/javascript">
  $(document).ready(
    function(){
        $("#contact").click(function () {
            $("#contactinfo").fadeToggle();
        });
    });
</script>

有问题的网站是这个。

另外，我认为我写错了jquery，因为这两个语句都有自己的 <script></script>标签？

感谢任何可以提供帮助的人:)

编辑：这似乎不起作用：

<script type="text/javascript">
  $(document).ready(
    function(){
        $("#music").click(function () {
            $("#musicinfo").fadeToggle();
            $("#about").click(function () {
            $("#aboutinfo").fadeToggle();
            $("#contact").click(function () {
            $("#contactinfo").fadeToggle();
        });
    });
</script>
4

2 回答 2

4

动画都接受回调函数，这些回调函数将在一个动画结束时调用：

$('#about').click(function() {
    $('#contactinfo, #musicinfo').fadeOut(function() {
        $('#aboutinfo').fadeIn();
    });
});

如果没有要淡出的东西（即没有可见元素），回调将立即触发。

...是的，这可能都在一个<script>块内，并且在一个$(document).ready侦听器内：

$(document).ready(function() {
   $('#about').click(function() { ... });
   $('#contact').click(function() { ... });
});

如果您使用类和 ID，您可能能够为所有元素编写一个单击处理程序。就像是：

$('.header-item').click(function() {
   var target = $('#' + this.id + 'info');
   $('.info-item').not(target).fadeOut(function() {
      target.fadeIn();
   });
});
于 2012-09-07T12:03:40.920 回答
0 
$("#button").click(function()
{
$("#div1").hide();
$("#div2").fadeIn("slow");
});

它会迅速淡出并淡入另一个 div。

于 2014-07-30T16:55:12.253 回答