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

您应该在循环中始终使用$(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);
    });
});

Answer 2

您只能使用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。这应该工作

JQuery突然无法正常工作

2 个答案: