slideToggle 효과가있는 로딩 파일

div 컨테이너에 텍스트 파일을로드하는 중입니다. 지금까지 작업을 완료했습니다. 지금 내가 원하는 것은 slideToggle 효과로 애니메이션을 적용하는 것입니다. 웹 페이지가 다음과 같이 표시됩니다.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

답장을 보내 주셔서 감사합니다. jquery는 현재 슬라이드 기능을 사용하고 있습니다. 나는 자유 시간이 있고 나는 다만 약간 잘 자바 스크립트를 이해하는 것을 시도로 주변에 놀고있다. – daniel

당신은 내용을로드 할 때까지 슬라이드 애니메이션이 발생하지 않도록, 당신의 아약스 요청에 콜백 이벤트를 첨부해야합니다

를 확인할 수 있습니다. 그래서 같을 것이다 jQuery의 내장 아약스 및 이벤트 기능을 사용하여 수행합니다

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

많은 감사합니다. 이것은 제가 원했던 것입니다. 하지만 지금 제발 jquery 없이이 일을 말해 줄 수 있습니까 ?? 작동하는 slideToggle 함수가 있다고 상상해 봅시다. – daniel

slideToggle 효과가있는 로딩 파일

답변

관련 문제