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

在功能滑块中，我将代码更改为：

$('.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）; ..始终将 this 保存到变量中以防止错误和重复。

Answer 2

当我观察并尝试你的代码时，它第一次出错，因为所有div都没有内联宽度，你在滑块类中设置标签的宽度。但如果你设置div的宽度，那么它不会导致任何错误的行为。

Answer 3

修改slide（）函数，如下所示

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

        }

    });
}

我刚刚添加了与在animate complete

中添加类相关的代码

第一个实例上的jQuery div动画buggy

3 个答案: