0

我有一个酒吧，我正在尝试制作动画，但我在这里遗漏了一些东西。这是我的 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});
  })
});
4

4 回答 4

0

css(width) should return something like N px, so you either have to process that to get the value or you can use height():

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

Also the effect is a little strange: see here.

于 2013-05-24T18:33:02.413 回答
0
  1. 正如@rjg132234 所述，您不需要该.find()方法。
  2. 你.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/

于 2013-05-24T18:35:56.287 回答
0

你不必使用 .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});
    })
});
于 2013-05-24T18:30:18.033 回答
0

我想扩展我的评论。我使用 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 });
    }
}
于 2013-05-24T18:42:14.757 回答