-1

我有两个 html 页面，index.html 和 photo.html

索引.html

<html>
<body>
   <div id="menu">
     <ul>
    <li><p id="about">ABOUT</p></li>
    <li><p id="work">WORK</p></li>
    <li><p id="photo">PHOTO</p></li>
    <li><p id="mail">MAIL ME</p></li>
     </ul>
   </div>
   <div id="photo-container">
   </div>
</body>
</html>

和 photo.html

<html>
<html>
<body>
  <div class="about12">
    <h4>a-design</h4>
    <p>
    //some text     
    </p>
  </div>
</body>
</html>

和一个javascript文件：

 $(document).ready(function(){

    $('#photo').click( function () {
        $("#container").load("photo.html .about12");
        $('#photo-container h4').fadeout(5000);
            $('#photo-container p').animate({top: '150px'},1500); 
    });
});

当我单击照片 ID 时，函数 .load() 会起作用，但之后，其他 jquery 函数将不起作用。为什么是这样？

另外，另一个问题是 .load() 是完成这项工作的最佳方法：加载、淡出和动画，还是有更好的方法？

4

3 回答 3

1

AJAX 表示异步加载。这部分：

$('#photo-container h4').fadeout(5000);
$('#photo-container p').animate({top: '150px'},1500);

甚至在加载照片容器之前触发。您需要将其作为回调传递

$('#photo').click( function () {
    $("#container").load("photo.html .about12", function() {
        $('#photo-container h4').fadeout(5000);
        $('#photo-container p').animate({top: '150px'},1500); 
    });
});
于 2013-04-08T17:25:41.397 回答
0

使用 jQuery .live 方法可能是您正在寻找的。

$("#photo").live("click", function(){ ... });
于 2013-04-08T17:25:55.667 回答
0

ajax 加载是异步的 .. 您需要对其成功回调函数的数据进行处理。用于find()获取动态添加的内容元素。你只需要在加载的第一个选项中传递 url

尝试这个

$('#photo').click( function () {
    $("#container").load("photo.html",function(data){
        $(data).find('#photo-container h4').fadeout(5000);
        $(data).find('#photo-container p').animate({top: '150px'},1500);
    });

});
于 2013-04-08T17:27:58.730 回答