问题
I know this has been discussed several times, but I have an issue that is a little different. when .slideUp() is called and the browser wind has been scrolled down to see all the bottom content, it flashes many times as the div is sliding closed.
Example page is below, just click where it says to, then slide to the bottom and close one of the upper divs.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>This is the title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.Accordion > div.Content').click(function() {
$(this).prev('div.collapsePanelHeader').slideDown(1000);
$(this).slideUp(1000);
});
$('div.Accordion > div.collapsePanelHeader').click(function() {
$(this).slideToggle(1000);
$(this).next('div.Content').slideToggle(1000);
});
$('div.Accordion > div.collapsePanelHeader2').click(function() {
$(this).toggleClass('accordionHeaderSelected','accordionHeader');
$(this).next('div.Content2').slideToggle(1000);
});
});
</script>
<style type="text/css">
.Accordion
{
font-size: .9em;
background-color: #ebebeb;
border: solid 2px #ccc;
padding: 5px 10px;
width: 500px;
}
p
{
font-size: 1em;
}
.collapsePanelHeader
{
}
.HeaderContent
{
background-color: #ebebeb;
}
.Content
{
background-color: #fff;
border: solid 1px #ccc;
padding: 10px;
}
.accordionHeaderSelected
{
border: solid 1px #ccc;
background-color: #EBEBEB;
margin-bottom: 10px;
}
.accordionHeader
{
border: none;
background-color: #EBEBEB;
margin-bottom: 10px;
text-decoration: none;
}
.collapsePanelHeader2
{
}
.HeaderContent2
{
background-color: #ebebeb;
}
.Content2
{
background-color: #ebebeb;
padding-left: 30px;
}
.gvCSections
{
padding-top: -10px;
}
.gvCSections tr td
{
padding: 5px;
}
</style>
</head>
<body>
<div class="Accordion">
<h2>Title Goes Here</h2>
<hr style="border-top: none; border-bottom: 1px solid #999999;" />
<div class="collapsePanelHeader">
Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here
... <span style="font-size: x-small; font-weight: bold; cursor: pointer; text-decoration: underline;">click for more</span>
<br /><br /><br />
</div>
<div class="Content" style="display: none;">
<div class="collapsePanelHeader3 accordionHeaderSelected">
CourseDescription
</div>
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<br />
<strong>For more information, contact</strong>:
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<strong>To enroll</strong>:
<br />
Click on a link below and complete the registration form.
</div>
<div class="collapsePanelHeader2 accordionHeader">
<b>Click on this line</b>
</div>
<div class="Content2 accordionContent" style="display: none;">
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
</div>
<h2>Title Goes Here</h2>
<hr style="border-top: none; border-bottom: 1px solid #999999;" />
<div class="collapsePanelHeader">
Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here
... <span style="font-size: x-small; font-weight: bold; cursor: pointer; text-decoration: underline;">click for more</span>
<br /><br /><br />
</div>
<div class="Content" style="display: none;">
<div class="collapsePanelHeader3 accordionHeaderSelected">
CourseDescription
</div>
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<br />
<strong>For more information, contact</strong>:
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<strong>To enroll</strong>:
<br />
Click on a link below and complete the registration form.
</div>
<div class="collapsePanelHeader2 accordionHeader">
<b>Click on this line</b>
</div>
<div class="Content2 accordionContent" style="display: none;">
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
</div>
<h2>Title Goes Here</h2>
<hr style="border-top: none; border-bottom: 1px solid #999999;" />
<div class="collapsePanelHeader">
Click here Click here Click here Click here Click here Click here Click here Click here Click here Click here
... <span style="font-size: x-small; font-weight: bold; cursor: pointer; text-decoration: underline;">click for more</span>
<br /><br /><br />
</div>
<div class="Content" style="display: none;">
<div class="collapsePanelHeader3 accordionHeaderSelected">
CourseDescription
</div>
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<br />
<strong>For more information, contact</strong>:
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
<strong>To enroll</strong>:
<br />
Click on a link below and complete the registration form.
</div>
<div class="collapsePanelHeader2 accordionHeader">
<b>Click on this line</b>
</div>
<div class="Content2 accordionContent" style="display: none;">
<br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
Content Content <br />
</div>
</div>
</body>
</html>
回答1:
An easy fix is to check the computed height of the body element before closing a collapsible element, then set the body's computed height as its CSS height property.
$('div.Accordion > div.collapsePanelHeader').click(function() {
var body = $('body');
body.css('height', 'auto');
body.css('height', body.height());
$(this).slideToggle(1000);
$(this).next('div.Content').slideToggle(1000);
});
This forces the body element to maintain its height, even when closing a tall panel that would normally reset/redraw the body to its earlier default height.
Note also that before checking the computed height, the CSS height is reset to auto, otherwise jQuery bypasses the computed style and uses the value set during the previous pass.
回答2:
Did you try detecting if the window is scrolled and centering or moving the window. This only happens when the window is scrolled all the way down and the content get smaller so you don't need to scroll anymore, the scroll bar / window is changing in height and starts to flicker. But i guess this might be a bit of an overkill.
Another idea that just popped in my head, you could try to detect if your at the bottom of the screen and just add a container that will hold the total height of the screen, this should fix the flickering you will end up having a blank space at the bottom of the page.
P.S.: if you find a good solution to this problem i would be very interested to hear it.
来源：https://stackoverflow.com/questions/4821306/jquery-flicker-on-slideup-in-all-browsers-sample-page-attached