-1

index.html と photo.html の 2 つの 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() が最適な方法ですか、それとももっと良い方法がありますか?

4

3 に答える 3

1

AJAX は非同期ロードを意味します。この部分：

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

photo-container がロードされる前でも発火します。コールバックとして渡す必要があります

$('#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 に答える