祝你好运！

Question

我有个主意。我想知道是否有可能用jQuery / CSS3实现一个效果：点击元素会在元素/光标位置上显示新文本。这段文字将慢慢向上滑动并逐渐淡出。按钮/元素不会改变。

在文本中描述它可能有点困难所以我把它放在图片中：

http://i.imgur.com/9T60eUg.png

当你买东西时电脑游戏很常见，但我不记得我曾经在网站上看过它。

拜托，您知道它是如何调用的，我可以在哪里找到解决方案吗？或者你能告诉我实现它的线索吗？感谢。

Answer 1

编辑：在提问者解释得更好之后更改了答案

我现在看到了你想要的东西。这是一个更新的jsfiddle：http://jsfiddle.net/d4qGc/667/ 它会附加文本，然后使用css不透明度和顶部定位将动画应用到后面的附加文本。

HTML：

<p><br><br><br></p> <!-- pushing button down a bit -->
<div id="Content">
    <button id="Add">Add to cart</button>
</div>

JS：

$(function () {
  $('#Add').on('click', function () {
    $('<p id="message">+$59.99!</p>').appendTo('#Content');
  });
}); 

$("#Add").click(function() {
$("#message").animate({
    top: -100,
    opacity: 0 
}, 1000,"linear",
    function() {
$(this).remove();
})
});

CSS：

#message { position: relative;
    top: -50px;
}

Answer 2

尝试这样的事情（你需要JQuery）：

$("#buttonID").click(function(){

var elem = document.createElement("h3");
elem.style.position = "fixed";
elem.style.top = $("#buttonID").style("top") + 10;
elem.style.left = $("#buttonID").style("left") + 10;
elem.value = "" //Whatever value you want.
elem.id = "txtFloat";
document.getElementById("CONTAINER").appendChild(elem); //whatever container you want.


$("#txtFloat").animate({top:40px;},1500); //This will move the button up(The button needs to have position:fixed, or position:absolute for this to work).
$("#txtFloat").fadeOut(900); //This will fade the button as it is being moved up. The button will be faded out before it reaches the top of the animation.

});

浮动和淡出文字？

2 个答案:

祝你好运！