div滑蓋與阿賈克斯函數

Question

這與這篇文章大致相同的問題：slide div offscreen, append content with ajax call, slide div onscreen

但我不能有動畫。我認爲這是因爲我的div #section有width:100%。

這是我的html代碼：

<div class="coda-slider" id="slider-id"> 
    <div id="section" class="screen_active"> 
     //content of my first page with the link of the page I need 
     //to load on the next div 
    </div> 
    <div id="section" class="screen"></div> //empty div for the ajax request 
</div> 

這裏是點擊事件的JS：

$.ajaxSetup({ 
    cache: false 
}); 

$('.ei-title h2 a').click(function() { 
    event.preventDefault(); 
    // Get the URL of the page to load 
    var url = $(this).attr('href'); 
    $('.screen').load(url); // load the content to the second div 
    $(".screen_active").animate({left: '-50%'}, 500, function() { 
     $(".screen_active").css('left', '150%'); 
     $(".screen_active").appendTo('.screen'); 
    }); //animate 
    $(".screen").load(url).animate({left: '50%'}, 500); 
}); 

瞧，這個我的內容是完全加載，但我沒有任何我的div的動畫。

謝謝你的幫助。

編輯：

我做了這個JS代碼： 我做了下面的代碼，它工作正常： `$ .ajaxSetup（{ 緩存：假 }）;

$('.ei-title h2 a').click(function() { 
    event.preventDefault(); 
    // Get the URL of the page to load 
    var url = $(this).attr('href'); 
    $('#section2').load(url, function() { // load the content to the second div 
     $("#section").animate({left: '-100%'}, 1500, function() { 
      $("#section").css('left', '100%'); 
      $("#section").appendTo('#section2'); 
     }); //animate 
     $('#section2').animate({left: '0%'}, 1500); 
    }); 
});` 

而這個CSS代碼：

.screen_active { 
    position : absolute; 
    width: 100%; 
    left: 0%; 
} 

.screen { 
    position : absolute; 
    width:100%; 
    left: 100%; 
} 

它工作正常:) 感謝您的幫助！

Answer 1

根據documentation，在回調函數中設置下一個動畫。在你的情況應該是：

$('.ei-title h2 a').click(function() { 
    event.preventDefault(); 
    // Get the URL of the page to load 
    var url = $(this).attr('href'); 
    $('.screen').load(url, function() { // load the content to the second div 
     $(".screen_active").animate({left: '-50%'}, 500, function() { 
      $(".screen_active").css('left', '150%'); 
      $(".screen_active").appendTo('.screen'); 
     }); //animate 
    }); 
    $(".screen").load(url, function() { 
     $(this).animate({left: '50%'}, 500); 
    }); 
});