Вам понадобится $ (document) .ready (), если вы пытаетесь что-то сделать после загрузки страницы.
http://api.jquery.com/ready/
Причина, по которой вы используетеready () и not load () - это то, что load () происходит, когда html анализируется, но до того, как объектная модель документа (DOM) готова, и именно на это опирается JS для манипулирования содержимым страницы (DOM).Поэтому вы присоединяетесь к ready (), когда хотите настроить то, что представляет браузер, например, для манипулирования фактическим контентом (добавление / удаление / манипулирование элементами / классами / структурой, инициализация лайтбокса и других плагинов, выполнение эффектов и т. Д.).
Итак, я думаю, что вы описываете:
$(document).ready(function(){
$('a.clickaffected').each(function(){
$(this).fadeIn();
});
});
РЕДАКТИРОВАТЬ: Вы хотите сделать функцию обратного вызова:
$(document).ready(function(){
// load home.html page when the page loads
$("#main_content_inner").load("onmouseclick.html");
$("#latest").click(function(){ // load page1 on click
$("#main_content_inner").hide();
$("#main_content_inner").load("testscript.html", function(){
$(this).fadeIn(5000);
});
});
});
И из вашего ответа:
$(document).ready(function(){
// load home page when the page loads
$("#main_content_inner").load("home.html");
$("#page1").click(function(){
// load page1 in main_content_inner on click
$("#main_content_inner").hide();
$("#main_content_inner").load("page1.html", function(){
$(this).fadeIn(5000);
});
});
$("#page2").click(function(){
// load page2 in main_content_inner on click
$("#main_content_inner").hide();
$("#main_content_inner").load("page2.html", function(){
$(this).fadeIn(5000);
});
});
$("#page3").click(function(){
// load page3 in main_content_inner on click
$("#content").hide();
$("#content").load("page3.html", function(){
$(this).fadeIn(5000);
});
});
});
Обратите внимание, что вы можете связывать вызовы функций, как демонстрирует lolwut, но я не уверен, что вы можете сделать это, не дожидаясь загрузки, чтобы сделать вашу анимацию.Поэтому я не уверен, что $('#id').hide().load().fadeIn()
будет работать в случае медленной загрузки страницы, но $('#id').hide().load(url,[callback w/fadeIn()])
ожидает полной загрузки страницы, прежде чем сработает fadeIn ().
EDIT 2:
Из-за заявленной проблемы исходного плаката, заставляющей код работать, я создал html-файл, который я включил ниже, со страницей # .html, созданной для каждого.Приведенная ниже HTML-страница работает так, как я тестировал с помощью jquery 1.4.4.
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// load home page when the page loads
$("#main_content_inner").load("home.html");
$("#page1").click(function(){
// load page1 in main_content_inner on click
$("#main_content_inner").hide();
$("#main_content_inner").load("page1.html", function(){
$(this).fadeIn(5000);
});
});
$("#page2").click(function(){
// load page2 in main_content_inner on click
$("#main_content_inner").hide();
$("#main_content_inner").load("page2.html", function(){
$(this).fadeIn(5000);
});
});
$("#page3").click(function(){
// load page3 in main_content_inner on click
$("#content").hide();
$("#content").load("page3.html", function(){
$(this).fadeIn(5000);
});
});
});
</script>
</head>
<body>
<span id="page1">Page 1</span>
<span id="page2">Page 2</span>
<span id="page3">Page 3</span>
<h4>Main Content Inner</h4>
<div id="main_content_inner"></div>
<h4>Content</h4>
<div id="content"></div>
</body>
</html>