Question

我有一个酒吧，我正在尝试动画，我在这里遗漏了一些东西。这是我的HTML

<div class="bar"><span style="width: 74%;"></span></div>

这里是jquery：

$(document).ready(function(){
$('.bar span').each(function(){
    var $percent = $(this).find('span').css('width') * 0.8;
    $(this).find('.bar span').animate(
        {width:$percent+"%"},
        {duration: 5000});
  })
});

我知道我很接近......但似乎无法找到动画的范围。

谢谢大家的帮助。我终于让它在标题标签中寻找一个数字，因为我无法弄清楚宽度的值。这是我结束的jquery。

$(document).ready(function(){
$('.bar span').each(function(){
var $percent = $(this).attr('title') * 0.8;
$(this).animate(
    {width:$percent+"%"},
    {duration: 1000});
  })
});

Answer 1

您不必使用.find（），您只需使用$（this），因为您已经选择了

的范围

$('.bar span').each()

所以它应该......

 $(document).ready(function(){
       $('.bar span').each(function(){
       var $percent = $(this).css('width') * 0.8;
        $(this).animate(
        {width:$percent+"%"},
        {duration: 5000});
    })
});

Answer 2

css(width)应返回N px之类的内容，因此您必须处理该值以获取值，或者您可以使用height()：

var $percent = $(this).width() * 0.8;

此外效果有点奇怪：见here。

Answer 3

正如@ rjg132234所述，您不需要.find()方法。
您的.css('width')将返回固定字符串。不是'74'你期待的。我建议使用data-属性。

HTML

<div class="bar">
    <span data-width="74">
    </span>
</div>

的jQuery

$(document).ready(function () {
    $('.bar span').each(function () {
        var $percent = $(this).data('width') * 0.8;
        $(this).animate({
            width: $percent + "%"
        }, 5000 );
    });
});

小提琴链接：http://jsfiddle.net/KqsRM/1/

Answer 4

我想扩大我的评论。我使用jQuery进度条来做类似于你想要的东西。以下是如何完成的。尽管如此，消除对进度条的需求是相当简单的。

Html

<div id="autorefresh-section">
    <div id="autorefresh-control">
        <label for="autorefesh">Auto-Refresh</label> 
           <input type="checkbox" id="autorefresh" checked="checked" />
    </div>
    <div id="countdown"></div>
</div>

JavaScript代码

/**
  * This function sets the time interval used to auto-refresh the page.
  */
function check_refresh(countdownValue, secondsRemaining) {
    var autorefresh = $("#autorefresh");

    if ($(autorefresh).attr("checked") == "checked") {      
        setTimeout(function() {
            var value = Math.round(secondsRemaining / countdownValue * 100);
            // consoleDebug("Seconds remaining: " + secondsRemaining);
            secondsRemaining -= 10;
            $("#countdown").progressbar("option", "value", value);
            if (secondsRemaining < 0) {
                reloadTab("all");
                check_refresh(300, 300);
            } else {
                check_refresh(countdownValue, secondsRemaining);
            }
        }, 10000);
    } else {
        $("#countdown").progressbar({ disabled: true });
    }
}

使用jquery将bar设置为百分比值

4 个答案: