Question

如何为jQuery的text（）函数添加效果。我有这段代码：

$('#A1').text(Number($('#A1').text()) + 1);

此代码更改<span>代码的值。

如何添加这样的效果？

enter image description here

我试过了：

$('#A1').text(Number($('#A1').text()) + 1).slideDown('slow');

但是我错过了一些东西......

Answer 1

您可以使用jQuery＆＃39; animate的简单动画。例如：

var duration = 500;
var $d = $('#div');
var $s = $('#span');
$d.click(function() {
    var $newNum = $('<span>').text('3').css({
        position: 'absolute',
        bottom: $s.height()
    }).appendTo($d);

    $newNum.animate({
        bottom: 0
    }, {
        duration: duration,
    });

    $s.animate({
        top: $s.height(),
        height: 0
    }, {
        duration: duration,
        complete: function() { $s.remove(); }
    });
});

HTML：

<div id='div' style='position:relative'>Amount: 1<span id='span' style='position:absolute'>2</span></div>

<强> Here's a JSFiddle.

Answer 2

我发现 Doorknob解决方案难以在实际使用中实施，由于硬编码的HTML结构，数据被拉出并发送到数据库

这是我的2c：

<强> jsBin demo

<span data-likes="8" data-userliked="false">Like </span>

在上面的HTML中，您只需将数据库中的信息填入data-*属性即可。

$('[data-likes]').each(function() {      
  var voteOnce = false, // Set to "true" to allow only one user vote !!!
      errorMessage = "You already liked this." ,
      votePos = "append", // Use: "prepend" or "append""
      $el = $(this).css({display:"inline-block", cursor:"pointer"}),
      data = $el.data(),
      s1CSS = {position:"relative", display:"inline-block",
               overflow:"hidden", verticalAlign:"bottom"},
      s2CSS = {position:"absolute", right:0}; 

  // ////////////////////////      
  var $s1 = $("<span />", {css: s1CSS}),
      $s2 = $("<span />", {css: s2CSS, text:data.likes});
  $el[votePos]( $s1.append( $s2 ) );
  var w = $s2.width(), h = $s2.height();  
  $s1.css({width:w, height:h});      
  $el.click(function(){
    if(voteOnce && data.userliked){
      return alert( errorMessage );
    }
    data.userliked = true; // (Send also info to database!)
    data.likes++;
    var $sX = $s2;   // Remember old span2
    $s2 = $("<span />",{text: data.likes, css:{top:-h}}).css(s2CSS);
    $s1.append($s2); // Append new span
    w = $s2.width();
    h = $s2.height();
    $s1.animate({width:w, height:h});
    $s2.animate({top:0});
    $sX.animate({top:h},function(){ $(this).remove(); });
  });    
});

那就是它。

为了让您了解上述内容，您可以更好地理解或设计元素，它会自动创建此HTML结构：

<span data-likes="8" data-userliked="false">
    Like
    <span>            <!-- THIS IS $s1, has overflow and relative pos. -->
       <span>8</span> <!-- THIS IS $s2, with absolute position -->
    </span>
</span>

用户点击后发生的事情是：

<span data-likes="9" data-userliked="true">
    Like
    <span>            
       <span>8</span> <!-- this becomes $sX, animate it to top:h and remove-->
       <span>9</span> <!-- new appended $s2, animate it to top:0 -->
    </span>
</span>

如果您想要另外设置<span>元素的样式，请使用：

span[data-likes]{ }             /* The main SPAN */
span[data-likes] > span{ }      /* The relative SPAN parent */
span[data-likes] > span span{ } /* The absolute SPANS with numbers */

如何使用jQuery动画像按钮数字？

2 个答案: