2011-08-30 66 views
0

我有這個JavaScript:http://www.mastermind-solutions.com/wp-content/uploads/2008/07/jquery-popup-bubble/index.html如何修改我的JavaScript腳本?

這裏的HTML:

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

我需要的是得到一個簡單的div這個jQuery的動畫沒有鏈接。我需要動畫的html:<span class="tickercontainer" id="votes<?php the_ID(); ?>"><?php echo $votes; ?></span>我應該如何修改這個效果才能使它適合我的情況?

的javascript:

$(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。 –