本当に単純なスライダーで jQuery アニメーションに問題があります。それらを初めてクリックすると、アニメーションがバグるように見えます。アニメーションにより、div がコンテナーを分割します。含まれているdivにoverflow: hiddenを追加しますが、下にオーバーフローするのではなく、コンテンツを「フラッシュ」するだけです。
各要素の最初のクリックの後、アニメーションは問題ありません。この動作を回避する方法はありますか?
例を次に示します: 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');
});
}
});
}