Question

我有一个关于动画效果的问题，它将某个div加载到网站的主体中。

让我更准确一点：我有一个id为'contact'的div： <div id="contact">content</div>当我按下id为'ajax_contact'的链接时，jquery代码会加载该div中的内容：<a href="#" id="ajax_contact">link</a>。

代码运行正常。但是，我希望在网站加载时#contact为HIDDEN，即默认状态必须是不可见的。只有当用户点击链接#ajax_contact时，才能显示div。

请查看jquery代码：

$(document).ready(function() {

    var hash = window.location.hash.substr(1);
    var href = $('#ajax_contact').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #contact';
            $('#contact').load(toLoad)
        }
    });

    $('#ajax_contact').click(function(){

        var toLoad = $(this).attr('href')+' #contact';
        $('#contact').hide('fast',loadContent);
        $('#load').remove();
        $('body').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#contact').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#contact').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;

    });

});

我不确定是否必须在HTML中更改某些内容，但我相信密钥位于jquery-code中。我也尝试给#contact一个CSS样式的visible：none，但这会循环并使得jquery无法加载#contact。

我希望我能很好地解释自己;非常感谢你提前克里斯

Answer 1

CSS：

#contact { display: none; }

jQuery的：

$("#contact").hide();

我建议的是：

<a id="contact" class="load">Load contacts</a>
<div id="content_contact" class="load"></div>

使用CSS：

div.load { display: none; }

和

$("a.load").click(function() {
  $("#load_" + this.id).load("...", function() {
    $(this).show();
  });
  return false;
});

编辑：您的主要问题是您传递回调的方式。而不是：

$("#contact").load(toLoad, '', showNewContent());

做的：

$("#contact").load(toLoad, '', showNewContent);

第一个版本将返回值传递给load()。第二个传递函数本身。

修改2：切换显示：

$("a.load").click(function() {
  var dest = $("#load_" + this.id);
  if (dest.hasClass("loading")) {
    // do nothing if already loading
  } else if (dest.is(":visible")) {
    dest.hide();
  } else if (dest.is(":empty")) {
    dest.addClass("loading").load("...", function() {
      $(this).removeClass("loading").show();
    });
  } else {
    dest.show();
  }
  return false;
});

添加了一类“加载”以停止多个load()调用。加载后该类将被删除。仅通过检查目标div是否为空来加载内容一次。你可以改变它，如果你希望它每次被隐藏时加载它。这取决于你正在加载什么。

加载和动画内容

1 个答案: