Response title
This is preview!
[jQuery] fadeIn/fadeOut question
in Using jQuery
•
15 years ago
Sorry but I have no experience with Interface... it broke when I first
tried it many moons ago and I've never gone back... I should give it
another poke... sorry I can't help you here Tony... anyone else?
-----Original Message-----
From: discuss-bounces@jquery.com [mailto:discuss-bounces@jquery.com] On
Behalf Of Tony Collins
Sent: Thursday, January 11, 2007 11:36 AM
To: 'jQuery Discussion.'
Subject: Re: [jQuery] fadeIn/fadeOut question
I found the source of the problem. The interface elements plugin is the
culprit: http://interface.eyecon.ro/about
When its FX functionality is included, .fadeIn() won't restore an
element
that has had .fadeOut() applied under IE7. (ALEX: When I published the
example, I removed that script tag and that's why the example did not
exhibit the problem.)
+ Based on this behavior, does anyone have quick ideas as to what the
bug in
interface elements might be?
+ Does anyone have experience with Interface Elements? Should I just
dump
it and move to something else?
+ Can anyone suggest an alternative? The effects I'm interested in are
slide, drop, pulsate, shake, grow, shrink, and puff (which can be seen
at
http://interface.eyecon.ro/demos).
Example file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>fadeIn/Out example</title>
<script language="javascript" type="text/javascript"
src="jquery.js"></script>
<script language="javascript" type="text/javascript"
src="interface.js"></script><!-- all FX items from
http://interface.eyecon.ro/download -->
<script language="javascript" type="text/javascript">
var controller = { }
controller.show = function () {
var now = (new Date()).toString();
$("#test").html( now ).fadeIn();
window.setTimeout( controller.hide, 4000 );
if (!controller.log) controller.log =
document.getElementById("log");
controller.log.value = now + "\n"+ controller.log.value;
}
controller.hide = function () {
$("#test").fadeOut(); // changing this to .hide() will fix
the
problem
}
$(document).ready( function() {
window.setInterval( controller.show, 5000 );
} );
</script>
<style type="text/css">
HTML, BODY { overflow: hidden;
}
BODY { background-color: black; }
</style>
</head>
<body>
<div id="test" style="background-color:Transparent; color:yellow;
position:absolute; top:100px; left:100px; width:200px; height:200px;
border:
solid lime thin; padding:20px; display:none;">
Test
</div>
<textarea id="log" style="background-color: Silver; color:Black;
position:
absolute; font-size:8pt; top:100px; left:400px; width:200px; height:
200px;
border: solid white think; padding: 4px;"></textarea>
</body>
</html>
-----Original Message-----
From: Antonio Collins [mailto:Antonio.Collins@d3methods.com]
Sent: Wednesday, January 10, 2007 8:05 PM
To: discuss@jquery.com
Subject: Re: [jQuery] fadeIn/fadeOut question
tried it many moons ago and I've never gone back... I should give it
another poke... sorry I can't help you here Tony... anyone else?
-----Original Message-----
From: discuss-bounces@jquery.com [mailto:discuss-bounces@jquery.com] On
Behalf Of Tony Collins
Sent: Thursday, January 11, 2007 11:36 AM
To: 'jQuery Discussion.'
Subject: Re: [jQuery] fadeIn/fadeOut question
I found the source of the problem. The interface elements plugin is the
culprit: http://interface.eyecon.ro/about
When its FX functionality is included, .fadeIn() won't restore an
element
that has had .fadeOut() applied under IE7. (ALEX: When I published the
example, I removed that script tag and that's why the example did not
exhibit the problem.)
+ Based on this behavior, does anyone have quick ideas as to what the
bug in
interface elements might be?
+ Does anyone have experience with Interface Elements? Should I just
dump
it and move to something else?
+ Can anyone suggest an alternative? The effects I'm interested in are
slide, drop, pulsate, shake, grow, shrink, and puff (which can be seen
at
http://interface.eyecon.ro/demos).
Example file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>fadeIn/Out example</title>
<script language="javascript" type="text/javascript"
src="jquery.js"></script>
<script language="javascript" type="text/javascript"
src="interface.js"></script><!-- all FX items from
http://interface.eyecon.ro/download -->
<script language="javascript" type="text/javascript">
var controller = { }
controller.show = function () {
var now = (new Date()).toString();
$("#test").html( now ).fadeIn();
window.setTimeout( controller.hide, 4000 );
if (!controller.log) controller.log =
document.getElementById("log");
controller.log.value = now + "\n"+ controller.log.value;
}
controller.hide = function () {
$("#test").fadeOut(); // changing this to .hide() will fix
the
problem
}
$(document).ready( function() {
window.setInterval( controller.show, 5000 );
} );
</script>
<style type="text/css">
HTML, BODY { overflow: hidden;
}
BODY { background-color: black; }
</style>
</head>
<body>
<div id="test" style="background-color:Transparent; color:yellow;
position:absolute; top:100px; left:100px; width:200px; height:200px;
border:
solid lime thin; padding:20px; display:none;">
Test
</div>
<textarea id="log" style="background-color: Silver; color:Black;
position:
absolute; font-size:8pt; top:100px; left:400px; width:200px; height:
200px;
border: solid white think; padding: 4px;"></textarea>
</body>
</html>
-----Original Message-----
From: Antonio Collins [mailto:Antonio.Collins@d3methods.com]
Sent: Wednesday, January 10, 2007 8:05 PM
To: discuss@jquery.com
Subject: Re: [jQuery] fadeIn/fadeOut question