javascript - JQuery 突然不工作了

Question

由于某些原因，我的 javascript 没有正常工作。我隔离并清理了所有内容，但仍然坚持这一点。而不是试图弄清楚是什么导致了这种情况(已经花了几个小时)，我决定只是想出一个更好的方法。毕竟，剥猫皮的方法不止一种，对吧？ 这就是我想要做的。让某些东西从 0 宽度然后回到 100% 宽度。 它有效，但由于某种原因，它在我的应用程序中回到 0

Jsfiddle:http://jsfiddle.net/THnvz/2/

$(document).ready(function () {
    $(".stretcher").each(function () {
        $(".stretcher")
            .data("origWidth", $(this).width())
            .width(0)
            .animate({
            width: $(this).data("origWidth")
        }, 2000);
    });
});

只是在寻找一种更简洁、更简单的方法。有什么建议吗？

Answer 1

你可以只使用 CSS3 来做到这一点

将您的 CSS 更改为:

.stretcher {
    background-color:red;
    width:100%;
    height:10px;
    animation: firstchange 2s linear;
    -webkit-animation: firstchange 2s linear;
    -moz-animation: firstchange 2s linear;
}

@keyframes firstchange
{
0% {width:100%}
50% {width:0}
100% {width:100%}
}

@-webkit-keyframes firstchange /* Safari and Chrome */
{
0% {width:100%}
50% {width:0}
100% {width:100%}
}

@-moz-keyframes firstchange /* Firefox */
{
0% {width:100%}
50% {width:0}
100% {width:100%}
}

您不需要任何 JavaScript。这应该有效