2013-03-04 6 views
0

다른 제 사이트에서 완벽하게 작동하는 간단한 jquery 애니메이션을 구현하려고 할 때 제 머리카락을 찢어 내고 있습니다. 내가 만든 유일한 변화는 선택자와 다른 객체에 애니메이션을 적용하려는 것입니다. (이 용어를 올바르게 사용하고 싶습니다.) 이상하게도 이전 사이트와 똑같은 시나리오를 사용하여 테스트 할 때도 결과가 없습니다.애니메이션이 워드 프레스에서 작동하지 않습니다.

누구나 작동하지 않는 명백한 이유가 있습니까? 이것은 내 루프 (워드 프레스)입니다

jQuery(document).ready(function($){ 
    $(".themelist li").hover(
     function() { 
      $(".themedescription").animate({opacity:"1"}); 
     }, 
     function() { 
      $(".themedescription").animate({opacity:'0'}, "fast"); 
     } 
    ); 
}); 

:

이 내 JQuery와있다

echo "<div class='themelist'><ul>"; 
foreach ($terms as $term) { 
    echo "<li>" . $term->name ."</li><div class='theme-description'>". $term->description. "</div>"; 
} 
echo "</ul></div>"; 

이 내 CSS입니다 :

.themelist { 
position: relative; 
cursor: pointer; 
} 

.themelist li {width:200px;} 

.theme-description { 
text-align: left; 
color: #CCC; 
background: #333; 
width:300px; 
position: absolute; 
padding: 20px; 
top:0; 
left:200px; 
opacity:0; 
} 

아이디어? 온통 검색했는데 어디서 잘못되었는지 알 수 없습니다.

UPDATE

진전을 보이고, 지금은 완전히 새로운 문제가있다.

$(document).ready(function() 
{ 
$(".themelist li").hover(function() 
    { 
$(".themedescription").filter(':not(:animated)').animate({opacity:"1"}); 
    }, 
(function() 
    { 
$(".themedescription").animate({opacity:"0"}); 
    } 
)); 
}); 

하지만, 대신에 하나씩 각각 내 목록에있는 링크에 해당하는 나타나는 사업부의 상상할 수있는, 모두가 나타날 : 내 애니메이션 실행을 만들기로까지 작동 finallyw 다음 조정 JQuery와 같은 시간. 가. 나는 이것을 보았어야했는데, CSS 디스플레이와 비슷하게 행동 할 것이라고 가정했다 : none, 한 번에 하나씩 만 보여라.

이 문제를 해결할 수있는 또 다른 효과가 있습니까? 또는 개별 클래스를 생성하여 내 div .theescription이 설명문 1, 설명문 2 등이되도록해야합니까?

다시 한 번 감사드립니다. 당신의 아이디어는 높이 평가됩니다. jQuery 코드에 -jennyb

답변

1

.themedescription 은 ...

대시 .... 당신의 jQuery 코드에 .theme-description를 사용하십시오 ... HTML/워드 프레스 코드에 대한 오타 오류입니다

관련 문제