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');
}
});
精彩评论