开发者

jquery slide flashing/blink issue on Firefox ubuntu

I have a <ul> list that is a little bit long. When you e开发者_StackOverflow社区xpand (slide down) that list elements, the browser does NOT scroll down and everything’s alright. When you contract (slide up) that list of elements, the browser scrolls up will flash/blink A lot while doing so.

  • This doesn't happen on MAC Firefox.
  • Neither on Windows (at least the versions I could test)
  • This occurs severely on Firefox Linux (ubuntu).

Does anyone had this issue before? If so, what can we do to solve it?

Here's a code sample for better understanding:

$('#btCatA').click(function() {
    $('#btCatA').toggleClass('selec');
    $('#listcatA').slideToggle('slow', function() {
        // ...
    });
});


You could probably prevent this by decreasing the scrollTop property of the window object by the height of that element before you slide up your list elements. jQuery has a method for that: .scrollTop(). You could animate that, too so that it looks a bit less hasty. The following (untested) code should do the trick:

var toggleClass = 'selec';

$('#btCatA').click(function() {
    var target = $(this),
        listElement = $('#listcatA');

    if (target.hasClass(toggleClass)) {
        target.removeClass(toggleClass);
        $(window).animate({
            scrollTop: '-='+listElement.height()+'px'
        }, 'slow', function () {
            listElement.slideUp('slow');
        });
    } else {
        target.addClass(toggleClass);
        listElement.slideDown('slow');
    }
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜