0

我在一个非常简单的滑块上遇到 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');
            });

        }

    });
}
4

3 回答 3

2

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

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

于 2012-07-16T12:04:25.917 回答
0

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

于 2012-07-16T11:50:10.823 回答
0

修改您的 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');
            });

        }

    });
}

我刚刚添加了与在动画完成中添加类相关的代码

于 2012-07-16T11:58:03.023 回答