小编Ale*_*eix的帖子

我有这张桌子:

使用以下代码:

    <table border="1" id="comparativa">
        <tr>
            <td rowspan="2"></td>
            <td colspan="3" class="friuty">Fruity</td>
        </tr>
        <tr>
            <td class="lila">Intensed</td>
            <td class="lila">Medium</td>
            <td class="lila">Low</td>
        </tr>
        <tr>
            <td class="lila">Green</td>
            <td><img src="img/forsutpeque.png" /></td>
            <td><img src="img/donapeque.png" alt="" /></td>
            <td>-</td>
        </tr>
        <tr>
            <td class="lila">Mellow</td>
            <td>-</td>
            <td><img src="img/marpeque.png" alt="" /></td>
            <td>-</td>
        </tr>
        <tr>
            <td class="lila">Balanced</td>
            <td>-</td>
            <td><img src="img/cotxepeque.png" alt="" /></td>
            <td>-</td>
        </tr>
    </table>

和以下CSS

#comparativa { 
    width:350px; 
    font-size:1.2em; 
    border-spacing:0px; 
    border-collapse:separate; 
    empty-cells:hide !important; 
    border:0; 
}
#comparativa tr td { 
    padding:2px 4px; 
    border:#9f4dc2 solid 1px; 
    text-align:center; 
    width:88px; 
    color:#bdac77; 
}
#comparativa tr td.friuty …

我想在活跃用户的Google Analytics中制作像这样的动画.

我如何在javascript/jquery中执行此操作？

根据要求,我尝试了:

<span id="counter">0</span>    

$(function ()
{
    var $counter = $('#counter'),
        startVal = $counter.text(),
        currentVal,
        endVal = 250;


    currentVal = startVal;
    var i = setInterval(function ()
    {
        if (currentVal === endVal)
        {
            clearInterval(i);
        }
        else
        {
            currentVal++;
            $counter.text(currentVal);
        }
    }, 100);


});

但我不认为这是要走的路......

元素#open和#close时,他们不应该做的是在动画过程中dissappear.

这是代码,在这个框下面是jsfiddle.

/* CSS */
#web { width:700px; height:600px; background:#ce5a3e}
#dreta { width:200px; height:600px; background:#000; float:right; position:relative }
#open { position:absolute; top:0; left:-50px; display:none; color:#fff; }
#close { position:absolute; top:0; left:-50px; color:#fff; }

<!-- HTML -->
<div id="web">  
    <div id="dreta">
        <a id="close" href="#">Close</a>
        <a id="open" href="#">Open</a>
    </div>
</div>
// JAVASCRIPT
$("#close").click(function() {   

    $("#dreta").animate({width: 0}, {duration: 1000,easing: "easeOutQuint",complete: function() {

        $("#close").fadeOut();
        $("#open").fadeIn();

    } });

});

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

    $("#dreta").animate({width: '200px'}, {duration: 1000, easing: "easeOutQuint", complete: function() {

        $("#close").fadeIn(); …