Wilco Van Meppelen Scheppink Wilco Van Meppelen Scheppink - 4 months ago 10
Javascript Question

Why is my filter glitchy?

I have build a filter on: http://www.helvar.nl/nieuws

but it is very glitchy, I tried everything that may help like

.stop() and
delete all css transitions

but nothing helps..

Can somebody maybe help with whats going on?

I bit of my javascript:

var oldCategory = false;
var wrapper = "#news-container";

function filter(categoryId){
$('.filter-list li').removeClass('active');
$(this).addClass('active');
currentHeight = $(wrapper).height();
console.log('currentHeight ', currentHeight);

$('.mix2').hide();
$('.category-'+categoryId).show();

contentHeight = $(wrapper).height();
console.log('contentHeight ', contentHeight);

$(wrapper).height(currentHeight);
$(wrapper).delay(100).animate(
{
height: contentHeight
},
200,
function(){
$(wrapper).height('auto');
}
);

$('.mix2').hide();
if(oldCategory){
$('.category-'+oldCategory).show();
$('.category-'+oldCategory).stop().fadeOut(function(){
$('.category-'+categoryId).show();
});
} else {
$('.mix2').show();
$('.mix2').stop().fadeOut(function(){
$('.category-'+categoryId).show();
});
}
oldCategory = categoryId;
}
function showAllFiltered(){
$('.mix2').fadeIn('200');
};
$(function() {
$('.filter-list li, .filter-list-mobile li').click(function(){
$('.filter-list li, .filter-list-mobile li').removeClass('active');
$(this).addClass('active');
});
});

Answer

So I figured out what the problem is.

it is in this piece of code:

$(wrapper).delay(100).animate(
   {
       height: contentHeight
    },
    200, 
    function(){
       $(wrapper).height('auto');
    }
);

The animation is first going on the contentHeight and the after that animation the height is set to 'auto' so it flickers when I do it.

I have to find another way to animate the height.