다른 제 사이트에서 완벽하게 작동하는 간단한 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