Border flickering during toggle of a box
Hi
I want to get a slide menu with help of the JQuery Toggle method. I have found an example how to make it. Problem is that when the box is sliding in the border flickers. How can I make smooth sliding of the box?
The code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Effects - Toggle Demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.toggler {
width: 500px;
height: 200px;
}
#button {
position: relative;
left: 500px;
padding: .5em 2em;
text-decoration: none;
}
#effect {
position: relative;
width: 240px;
height: 135px;
padding: 0.4em;
}
#effect h3 {
margin: 0;
padding: 0.4em;
text-align: center;
}
body{
background-color: blue;
}
</style>
<script>
$(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = "slide";
// most effect types need no options passed by default
var options = {};
// run the effect
$( "#effect" ).toggle( selectedEffect, options, 1000 );
};
// set effect from select menu value
$( "#button" ).click(function() {
runEffect();
return false;
});
});
</script>
</head>
<body>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all" style="position: relative; top:0px; width:200px; height:300px; background-color: white">
<h3 class="ui-widget-header ui-corner-all">Toggle</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
</div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
</body>
</html>