Ajax загрузка файла с эффектом slideToggle

Question

Я загружаю текстовые файлы в контейнер div, и я заставил его работать до сих пор. Теперь я хочу анимировать его с помощью эффекта 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 к ссылкам? Вы можете проверить актуальную веб-страницу ЗДЕСЬ

Большое спасибо

Answer 1

Вам необходимо прикрепить событие обратного вызова к вашему запросу ajax, чтобы анимация слайдов не появлялась до тех пор, пока содержимое не загрузится. Для этого, используя встроенные в jQuery функции ajax и event, это будет выглядеть так:

<?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>