JQuery突然不能正常工作

由於某些原因，我的JavaScript一直沒有正常工作。我隔離並清理了一切，但我堅持這一點。相反，然後試圖找出它是什麼造成了這一點（已經花了數小時），我決定找出一個更好的方法。畢竟，有不止一種方式來剝皮貓，對吧？ 以下是我想要做的。有東西從0寬度，然後回到100％寬度。它的工作原理，但由於某些原因，它可以追溯到0在我的應用程序JQuery突然不能正常工作

的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); 
    }); 
});

只是尋找一個將工作更清潔更簡單的方法。有什麼建議麼？

來源

2013-08-26 goo

foreach循環過多。 – Johan

你可以發佈一個jsFiddle來完成你的應用的功能嗎？ – j08691

所以序列應該是100％> 0> 100％，或0> 100％> 0？ –

爲此，您可以只用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-26 20:47:07 Tanuj

css3 ftw！謝謝:) – goo

是的css3總是:) – Tanuj

您應該在循環中始終使用$(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-26 19:39:36 Barmar

JQuery突然不能正常工作

回答

相關問題