ajax loading file with slideToggle effect
I am loading text files in div container, and I've made it work so far. What I wish now is to animate it with slideToggle effect. This is what the webpage looks like:
<div id="content" style="width: 75%">
<开发者_C百科;?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>
How to apply slideToggle function to links? You can check the actual webpage HERE
Many thanks
You'll need to attach a callback event to your ajax request, so that the slide animation does not occur until the content has loaded. To do so using jQuery's built-in ajax and event functionality would look like this:
<?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>
精彩评论