Hey,
I am using this code on my site:
var panel = $('.couch-hide');
var originalPos = panel.css("right");
panel.toggle(function() {$(this).animate({right:0},1000, 'easeOutBounce');},function(){$(this).animate({right:originalPos},1000);}
);
In FF it works flawlessly, but in IE, it doesn't pop out on click. Also, since im using the CSS right it shows the horizontal scrollbars but in FF it doesn't. Any ideas on what I can do to fix this issue?
Thank you,
Ryan
Well, works the same for me in Opera, Firefox and IE6/8.
Using the code below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>sandbox</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.js"></script>
<script type="text/javascript">
$(function(){
var panel = $('.couch-hide');
var originalPos = panel.css("right");
panel.toggle(
function(){$(this).animate({right:0}, 1000, 'easeOutBounce');},
function(){$(this).animate({right:originalPos}, 1000);}
);
});
</script>
<style type="text/css">
.couch-hide {
position: absolute;
right: 100px;
}
</style>
</head>
<body>
<div class="couch-hide">Click me!</div>
</body>
</html>
The text bounces against the right edge of the screen and then flies back.
Although using toggle to do that seems strange. At least the documentation doesn't mention what should happen when you provide two functions for it. Or is this the behaviour added by jquery.easing.js? Not familiar with that one.
It would be helpful if you provided your HTML and CSS too.