jQuery的動畫（）獲取對鉻laggy

這是我第一次jQuery腳本：jQuery的動畫（）獲取對鉻laggy

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Sliding test</title> 
     <style> 

        html { 
       height: 100%; 
       padding: 0; 
       margin: 0; 
      } 

      body{ 
       text-align: center; 
       background: url('bg.png'); 
       height: 100%; 
       margin: 0; 
       padding: 0; 
       box-shadow: 0 0 900px 35px rgba(0, 0, 0, 0.5) inset; 
      } 

      #global_wrap { 
       width: 1000px; 
       margin: 30px auto 0; 
      } 

      .container { 
       /*background: pink;*/ 
       height: 240px; 
       width: 290px; 
       overflow: hidden; 
       border-radius: 5px 5px 5px 5px; 
       border: 3px solid #EAEAEA; 
       display: inline-block; 

      } 

      .slide_wrapper { 
       height: 500px; 
       width:290px; 
       margin-left: 0px; 
       padding-left: 0px; 
       text-align: left; 
       background: white; 
       margin-top: 0; 
      } 



      li { 
       color: grey; 
       list-style: none outside none; 
      } 

      a { 
       color: inherit; 
       text-decoration: none; 
      } 

      img { 
       display: block; 
      } 


      h3 { 
       background: none repeat scroll 0 0 #252525; 
       color: white; 
       font-family: sans-serif; 
       margin: 0; 
       padding-bottom: 12px; 
       padding-top: 12px; 
       text-align: center; 
       width: 290px; 
      } 
     </style> 
     <script src="http://code.jquery.com/jquery-latest.js"></script> 
    </head> 
    <body> 
&nbsp; 
     <div id="global_wrap"> 
      <div class="container"> 
       <div class="slide_wrapper"> 
        <a href="javascript:;"> 
         <img src="visuel1.jpg" width="290" height="193"> 
         <h3>Category 1</h3> 
        </a> 
        <ul> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
        </ul> 

       </div> 
      </div> 



      <div class="container"> 
       <div class="slide_wrapper"> 
        <a href="javascript:;" > 
         <img src="visuel2.png" width="290" height="193"> 
         <h3>Category 2</h3> 
        </a> 
        <ul> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
        </ul> 

       </div> 
      </div> 



      <div class="container"> 
       <div class="slide_wrapper"> 
        <a href="javascript:;"> 
         <img src="visuel3.jpg" width="290" height="193"> 
         <h3>Category 3</h3> 
        </a> 
        <ul> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
        </ul> 

       </div> 
      </div> 

     </div> 


     <script> 
     //wrapper_click=false; 


     $(".slide_wrapper a").click(function(){ 

       if($(this).hasClass('open')) 
       { 
        // wrapper_click = false; 
        $(this).parent().animate({'margin-top': '0px'}, 'slow'); 
        $(this).removeClass('open'); 
       } 
       else 
       { 
        //wrapper_click = true; 
        $(this).parent().animate({'margin-top': '-193px'}, 'slow'); 
        $(this).addClass('open'); 
       } 
      }); 

     </script> 
    </body> 
</html>

我dont't知道爲什麼，但它的工作原理罰款的jsfiddle： http://jsfiddle.net/svmK5/

它適用於所有的瀏覽器罰款，例外鉻，我不明白爲什麼......我想我在我的代碼中犯了一些錯誤，這使得它有點遲緩

有人對腳本中出現了什麼問題有了解嗎？

來源

2013-04-26 Acuao

滾動起來順手，我...（鉻V26.0.1410） – 2013-04-26 07:51:42

作品在Chrome ... :)：）... – bipen 2013-04-26 07:54:44

鉻的作品，但是點擊它們時盒子會跳躍。 http://img62.imageshack.us/img62/3509/68425220.jpg – 2013-04-26 07:56:50

它工作在鉻這裏很好，你可以選擇使用肘類少編碼：

// toggleClass(class, [duration]) 

$(".slide_wrapper a").click(function() { 
    $(this).parent().toggleClass('open','slow'); 
});

CSS：

也全部slide_wrapper中的鏈接將執行上的點擊甚至，我會建議：

<a class="toggler" href="javascript:;"> 
$(".toggler").click...

這個小提琴可能會幫助：http://jsfiddle.net/svmK5/8/

修復佈局的bug我用：

.slide_wrapper { 
    float: left 
}

來源

2013-04-26 08:24:57

謝謝你的幫助，但它（但是確實有更少的編碼） – Acuao 2013-04-26 08:30:10

我用你的代碼，我不明白爲什麼，但沒有動畫（它在你的jsfiddle上有效），這個類切換，但不滑動...任何想法？ – Acuao 2013-04-29 08:57:30

你需要jQuery UI，這改變了切換類功能 – 2013-04-29 09:25:11

我發現是什麼讓腳本laggy，這是由於該CSS屬性：

html { 
    height: 100%; 
}

我不知道爲什麼會這樣使我的腳本遲鈍，但是當我刪除它時，我的腳本完美地工作

謝謝大家的幫助，特別是joel harkes爲您的有用幫助！

來源

2013-05-02 08:35:18 Acuao

這工作正常，在Chrome 26.0.1410

img{ image-rendering: -webkit-optimize-contrast; }

來源

2013-05-02 13:21:39 R2100

jQuery的動畫（）獲取對鉻laggy

回答

相關問題