0

本当に単純なスライダーで 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');
            });

        }

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

        }

    });
}

animate complete内にクラスを追加することに関連するコードを追加しました

于 2012-07-16T11:58:03.023 に答える