Question

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

的index.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（）是完成这项工作的最佳方法：加载，淡出和动画，还是有更好的方法？

Answer 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); 
    });
});

Answer 2

使用jQuery .live方法可能就是你要找的。

$("#photo").live("click", function(){ ... });

Answer 3

ajax load is asynchronus ..你需要对其成功回调函数的数据做一些事情。使用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);
    });

});

使用.load（）方法会阻止其他jquery方法工作吗？

3 个答案: