[英]How to amend my javascript script?
我有這個javascript: 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>
我需要的是在沒有鏈接的簡單div上獲取此jquery動畫。 我需要設置動畫的html: <span class="tickercontainer" id="votes<?php the_ID(); ?>"><?php echo $votes; ?></span>
<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;
}
如果您希望它在懸停時具有動畫效果,請改用以下方法:
$(document).ready(function(){
$(".tickercontainer").hover(function() {
$(this).stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).animate({opacity: "hide", top: "-70"}, "fast");
});
});
您需要的是其他選擇器,然后為“當前”元素設置動畫。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.