第一个例子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'); 
      }); 

     } 

    }); 
} 

我刚才说有关加入里面有生命的完整