1

スライド上でアコーディオンを作成すると、スライドしている要素の下にある要素が px だけ下に移動してから上に移動するように見え、ジャダー効果が生じます。

$(document).ready(function() {

//Promos banners rotation and accordion
$(function(){
    var $accordionList = $('.accordion').find('li');
    var numberOfItems = $accordionList.length;
    var currentItem = 0;

    // Set first item to active
    $accordionList.eq(currentItem).addClass('active').find('.content').slideToggle(800, function() {});

    // Loops through promos
    var infiniateLoop = setInterval(function() {

        if(currentItem == numberOfItems - 1){
            currentItem = 0;
        }
        else {
            currentItem++;
        }

        // Remove active class, if is has it, and close content
        $accordionList.parent().find('li.active').removeClass('active')
            .find('.content').slideToggle(800, function() {
        });

        // Add active class and open content
        $accordionList.eq(currentItem).addClass('active').find('.content').slideToggle(800, function() {
        });

    }, 4000 );

    // Click to show promo
    $accordionList.on('click', function () {
        // Stop rotation
        clearInterval(infiniateLoop);

        var $accordionHead = $(this);

        // Remove active class, if is has it, and close content
        if($accordionHead.hasClass('active')) {
            // Do nothing
        }
        else {
            $accordionHead.parent().find('li.active').removeClass('active')
                .find('.content').slideToggle(800, function() {
            });

            // Add active class and open content
            $accordionHead.addClass('active').find('.content').slideToggle(800, function() {
            });
        };
    });
});

});

ここで問題を示すフィドル

コンテンツ div の高さを修正するという提案をいくつか見ましたが、サイトはレスポンシブであるため、機能しません。

4

1 に答える 1

0

ええ、私は以前にこの問題を抱えていました。私のお気に入りの修正は、自分で作成することです.slideToggle() 

div = $('div');
height = div.height();
width = div.width();

$('div').click( function() {
  if ($(this).hasClass('hidden')) {
    $(this).animate({height: "0", width: "0"}, 200).hide().addClass('hidden');
  } else {
    $(this).animate({height: height, width: width}, 200).show().removeClass('hidden');
  }
});

必要に応じて、プロトタイプ関数でラップすることもできます。

于 2013-01-08T18:31:05.413 に答える