2011-08-17 8 views
0

게시물의 미리보기 이미지를 클릭하면 div의 내용이 애니메이션으로 표시됩니다. 다른 div를 클릭하면 내용이 다시 애니메이션으로 나타나고 새 내용으로 애니메이션이 적용됩니다. 컨텐트는 div theContainer에 표시됩니다.Wordpress 콘텐츠의 jQuery 애니메이션

현재는 아무 것도하지 않고 있지만, 내가 본 적이없는 어리석은 실수를 저지른 것은 확실합니다.

라이브 : http://www.mathewhood.com/sitefiles jsFiddle : http://jsfiddle.net/YpHCq/

N.B. <?php the_post_thumbnail(); ?>는 - <?php the_title(); ?> (WP에 게시물을 작성할 때 정의) 포스트 썸네일을 표시 - <?php the_content(); ?>이 게시물의 제목 표시 - 게시물이 할 수있는 매우 간단한 일이다

+1

jsfiddle에서''php'' 콘텐츠를 실행할 수 없습니다! 너 어디서 붙 였는지 아무 말도하지 말고, 아무도 상원 표결을 원하지 않는다. 나는 그 생각만으로 벌을 받아야한다고 생각한다. 어쩌면 당신은 현상금을 설정할 수 있습니다 ... 다음번에 옵션에 대해 생각해보십시오! –

+0

직선 html을 게시 한 다음 사람들이 내가 언급 한 것을 이해하지 못하게하는 대신 루프가 어떻게 작동하는지 보여주는 것이 더 많았습니다. 저는 많은 사람들이 업보 (upvotes) 그들이 내 방식대로 나를 도우면 나는 그들에게 기꺼이 나보다 행복하다. 나는 그들이 누구나에게 haha를 줄 것이다라고 말하지 않고 있었다. 내 문제는 콘텐츠를 표시하고 jQuery로 애니메이션을 적용하는 것입니다. –

+1

어쩌면 그들이 여기 upvotes에 대한, 나를 위해 stackoverflow 다른 PHP, 자바 스크립트, HTML 도서입니다! 나는 매일 내 대답과 다른 사람들의 대답을 배웁니다. –

답변

2

의 내용을 표시를, 다음 jQuery를 사용하여 시작으로 :

$(thumb-nail).click(function(){ 
    $('.down').slideUp("fast").removeClass('down'); 
    $(this).parent().find(stuff-to-hide).slideDown("fast").addClass('down'); 
}); 

여기 내 작업 예제를 확인 - http://jsfiddle.net/ajthomascouk/byWwk/

+0

이것은 내가 원하는 것만은 아니다. 내가 말했듯이 divContent에 위의 내용이 나타나기를 바란다. 또한 wordpress 루프와 호환되어야한다. –

+0

이것은 워드 프레스 루프와 호환 될 수 있습니다. 정확한 ID/클래스를 사용하기 위해 조정해야합니다. 이것은 결정적인 대답이 아니라 올바른 방향으로 나아가는 단계였습니다. – Alex

1

가 RU에 페이지를 일으키는 원인으로 보면 당신의 jQuery를 포함하는 PHP의 조각을 주석 시도 n 잘못. 또한 var의 이름을 $ container에서 좀 더 특유한 것으로 바꿀 것입니다.