ajax加載文件與slideToggle效果

我在加載文本文件在div容器，我已經使它的工作到目前爲止。我現在所希望的是用slideToggle效果對它進行動畫處理。這就是網頁的樣子：ajax加載文件與slideToggle效果

<div id="content" style="width: 75%"> 
    <?php 
    foreach(new DirectoryIterator('uploads/temp') as $file) 
    { 
     if(!$file->isDot()) 
     { 
      echo '<a href="#" onmousedown="javascript:ajax.query(
      \'view.php?file=uploads/temp/'.$file.'\',\'file\')">'.$file.'</a> '; 
     } 
    } 
    ?> 
    <div id="file" style="text-align: justify"></div> 
</div>

怎樣的slideToggle功能應用於鏈接？您可以檢查實際網頁HERE

非常感謝

來源

2011-02-17 daniel

幾個問題：你jQuery的，包括在你的頁面，但您使用的是您的AJAX請求另一種解決方案。有什麼特別的原因？你打算如何使用jQuery來達到上述效果？你有什麼樣的例子，你想要它看起來像什麼？ – polarblau 2011-02-17 20:35:44

感謝您的回覆。 jquery現在只是使用它的幻燈片功能。我有一些空閒時間，我只是玩弄試圖理解JavaScript稍微好一點。 – daniel 2011-02-17 21:14:54

你需要一個回調事件附加到你的Ajax請求，這樣，直到內容加載不會出現幻燈片動畫。要做到這一點使用jQuery內置的Ajax和事件的功能是這樣的：

<?php foreach... { 
    // Removed onmousedown, as the event is now attached using pure jQuery 
    echo '<a href="#">'.$file.'</a> '; 
} ?> 

<script type="text/javascript"> 

// Attach click event listener to all links inside id="content" 
$("#content a").live("click", function(e) 
{ 
    // Perform a simple Ajax call based on link contents 
    $.get('view.php?file=uploads/temp/'+$(this).text(), function(html) 
    { 
     // Hide div, populate content, and perform animation 
     $("#file") 
      .hide() 
      .html(html) 
      .slideDown(); 
    }); 
}); 

</script>

來源

2011-02-17 20:48:38

ajax加載文件與slideToggle效果

回答

相關問題