0

由于某种原因，我的 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);
    });
});

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

4

2 回答 2

1

您应该$(this)在循环内一致地使用。

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

您的原始代码是同时为每个拉伸器设置动画，并使其具有彼此的宽度。

您也可以使用普通变量而不是将宽度保存在.data()：

$(document).ready(function () {
    $(".stretcher").each(function () {
        var $this = $(this);
        var orig_width = $this.width();
        $this
            .width(0)
            .animate({
                width: orig_width
            }, 2000);
    });
});
于 2013-08-26T19:39:36.747 回答
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。这应该工作

于 2013-08-26T20:47:07.727 回答