第一個例子jQuery div動畫越野車

Question

我在一個非常簡單的滑塊上遇到jQuery動畫問題。第一次點擊它們時，動畫看起來很怪異。動畫使div打破容器。我添加溢出：隱藏到包含div，但它只是使內容'閃光'而不是溢出在下面。

第一次點擊每個元素後，動畫很好。任何想法如何避免這種行爲？

這裏是例子：http://jsbin.com/izuviv/edit#preview

HTML

<div id="slider"> 
    <div class="slide expanded"> 
     <img /> 
     <a href=""> 
      <h3>Lorem</h3> 
      <p>Ipsum</p> 
     </a> 
    </div> 
    <div class="slide"> 
     <img /> 
     <a href=""> 
      <h3>Lorem</h3> 
      <p>Ipsum</p> 
     </a> 
    </div> 
    <div class="slide"> 
     <img /> 
     <a href=""> 
      <h3>Lorem</h3> 
      <p>Ipsum</p> 
     </a> 
    </div> 
    <div class="slide last"> 
     <img /> 
     <a href=""> 
      <h3>Lorem</h3> 
      <p>Ipsum</p> 
     </a> 
    </div> 
</div> 

CSS

#slider {width: 632px; height: 231px; margin: 100px; font-family: arial, helvetica, sans-serif;} 
    #slider .slide {width: 71px; height: 231px; background: black; margin: 0 4px 0 0; float: left; display: inline; position: relative;} 
     #slider .slide a {display: block; width: 71px; height: 72px; background: transparent url(../img/white.png) 0 0 repeat; text-decoration: none; color: #000; position: absolute; bottom: 0;} 
     #slider .slide h3 {display: none;} 
     #slider .slide p {display: none;} 

    #slider .last {margin: 0;} 
    #slider .expanded {width: 407px;} 
     #slider .expanded a {width: 407px; background: transparent url(../img/white.png) 0 0 repeat;} 
     #slider .expanded h3 {margin: 10px 10px 0px 10px; font-size: 14px; font-weight: bold; display: block;} 
     #slider .expanded p {margin: 5px 10px; font-size: 12px; display: inline;} 

JS

function slider() { 

    var slide = $('#slider div'); 

    slide.click(function(){ 

     var expanded = $('#slider .expanded'); 

     if (!$(this).hasClass('expanded')) { 

      // 1: Shrink expanded div 
      expanded.animate({ 
       width: '71px' 
      }, 200, function() { 
       console.log('contract'); 
       // 2: Remove expanded class 
       $(this).removeClass('expanded'); 
      }); 

      // 3: Add expanded class to clicked 
      $(this).addClass('expanded'); 

      // 4: Expand clicked div 
      $(this).animate({ 
       width: '407px' 
      }, 200, function() { 
       console.log('expand'); 
      }); 

     } 

    }); 
} 

Answer 1

在功能Slider類代碼幻燈片（）函數，我改變了代碼爲：

$('.slide').click(function(){ 
    $this = $(this); 
    if(!$this.hasClass('expanded')){ 
     $exp = $('.expanded'); 
     $exp.animate({width:'71px'},200,function(){$exp.removeClass('expanded');}); 
     $this.animate({width:'407px'},200).addClass('expanded'); 
    } 
}); 

現在，它工作正常.. 我覺得是什麼原因造成的問題是：$（this）; ..總是保存這個 int o一個變量來防止錯誤和重複。

Answer 2

正如我觀察，並嘗試你的代碼，它是越野車第一時間，因爲所有的div都沒有內聯寬度，所以你需要在slider類中設置標籤的寬度。但如果你設置div的寬度，那麼它不會導致任何錯誤行爲。

Answer 3

修改如下

function slider() { 

    var slide = $('#slider div'); 

    slide.click(function(){ 

     var expanded = $('#slider .expanded'); 

     if (!$(this).hasClass('expanded')) { 

      // 1: Shrink expanded div 
      expanded.animate({ 
       width: '71px' 
      }, 200, function() { 
       console.log('contract'); 
       // 2: Remove expanded class 
       $(this).removeClass('expanded'); 
      }); 

      // 3: Add expanded class to clicked 
      //$(this).addClass('expanded'); 

      // 4: Expand clicked div 
      $(this).animate({ 
       width: '407px' 
      }, 200, function() { 
       console.log('expand'); 
       $(this).addClass('expanded'); 
      }); 

     } 

    }); 
} 

我剛纔說有關加入裏面有生命的完整