2011-08-30 10 views
0

나는이 자바 스크립트가 있습니다 http://www.mastermind-solutions.com/wp-content/uploads/2008/07/jquery-popup-bubble/index.html내 자바 스크립트를 수정하는 방법?

여기에 HTML의 :

<div class="rss-popup"> 
    <a href="feed-link" id="rss-icon">RSS Feed</a> 
    <em>Subscribe to our RSS Feed</em> 
</div> 

내가 링크없이 간단한 사업부에서이 JQuery와 애니메이션을 얻는 것입니다 무엇이 필요. 애니메이션을 적용해야하는 html : <span class="tickercontainer" id="votes<?php the_ID(); ?>"><?php echo $votes; ?></span> 내 효과를 내기 위해이 효과를 어떻게 수정해야합니까?

자바 스크립트 :

$(document).ready(function(){ 
    $(".rss-popup a").hover(function() { 
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow"); 
    }, function() { 
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast"); 
    }); 
}); 

CSS :

div.rss-popup em { 
    background: url("images/bubble.png") no-repeat; 
    width: 100px; 
    height: 49px; 
    position: absolute; 
    top: -70px; 
    left: -0px; 
    text-align: center; 
    text-indent: -9999px; 
    z-index: 2; 
    display: none; 
} 

.rss-popup { 
    margin: 100px auto; 
    padding: 0; 
    width: 100px; 
    position: relative; 
} 

#rss-icon { 
    width: 42px; 
    height: 42px; 
    background: url("images/icon.png") no-repeat 0 0; 
    text-indent: -9999px; 
    margin: 0 auto; 
    display: block; 
} 

답변

0

당신이 호버에 애니메이션하려는 경우, 단지 대신이 : 당신이 필요로하는 무엇

$(document).ready(function(){ 
    $(".tickercontainer").hover(function() { 
    $(this).stop(true, true).animate({opacity: "show", top: "-60"}, "slow"); 
    }, function() { 
    $(this).animate({opacity: "hide", top: "-70"}, "fast"); 
    }); 
}); 

는 다른 선택이다 "현재"요소에 애니메이션을 적용합니다.

+0

나는 이것을 시도했지만 정확하지 않다. 실제로 그것이하는 것은 호버 위에 있습니다 .ticekrcontainer는 올라가고 사라집니다. – user919375

+0

'tickercontainer' 클래스에 동일한 CSS를 적용해야 할 수도 있습니다. –

관련 문제