简体   繁体   English

如何修改我的JavaScript脚本?

[英]How to amend my javascript script?

I have this javascript: http://www.mastermind-solutions.com/wp-content/uploads/2008/07/jquery-popup-bubble/index.html 我有这个javascript: http//www.mastermind-solutions.com/wp-content/uploads/2008/07/jquery-popup-bubble/index.html

here's html: 这是html:

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

What I need is to get this jquery animation on a simple div without a link. 我需要的是在没有链接的简单div上获取此jquery动画。 My html which I need to animate: <span class="tickercontainer" id="votes<?php the_ID(); ?>"><?php echo $votes; ?></span> 我需要设置动画的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> How should I amend this effect to make it work in my case? <span class="tickercontainer" id="votes<?php the_ID(); ?>"><?php echo $votes; ?></span>如何修改此效果以使其适用于我的情况?

javascript: 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: 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;
}

If you want it animated on hover, just have this instead: 如果您希望它在悬停时具有动画效果,请改用以下方法:

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

What you need is different selector, then animate the "current" element. 您需要的是其他选择器,然后为“当前”元素设置动画。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM