Response title
This is preview!
Move this topic
Why does toggle() not work well with anything? {unsolved}
in Using jQuery
•
9 years ago
Works fine with images, just not flash.
$(function() {
$('img[name="image1"]').click(function(){
$('embed[name="video1"]').hide(2000);
});
});
<img src="img.jpg" name="image1" ></img>
<embed src="video.swf" name="video1" ></embed>
$(function() {
$('img[name="image1"]').click(function(){
$('embed[name="video1"]').hide(2000);
});
});
<img src="img.jpg" name="image1" ></img>
<embed src="video.swf" name="video1" ></embed>
1
Replies(7)
Try wrapping the <embed> in a <div> and then hide the <div>
Leave a comment on jay.blanchard's reply
Thanks, that worked. Only problem is that the video jumps behind the background then reappears as its hiding. If i toggle it then it comes back in and disappears until i scroll.
Leave a comment on 612wharfavenue's reply
Also show/hide doesnt work well with png's either,its actually worse, there maybe a frame of animation before it disappears. Ive tried it both in a div and alone. I dont get it, why is it so buggy?
Leave a comment on 612wharfavenue's reply
Looks like this is an issue with everything. I even made a fresh page just to test it, theres absolutely no animation, despite transition parameters being defined in css as well as in script. Id think if something were wrong on my end nothing would happen at all.
edit: well, theres a frame or two of animation, sometimes it will animate in fully, but its fairly random.
edit: well, theres a frame or two of animation, sometimes it will animate in fully, but its fairly random.
Leave a comment on 612wharfavenue's reply
how big is the image you are animating? and what browser are you using? have you tested this in multiple browsers?
I would expect the swf to not animate well, however the PNG should animate just fine, its just that the alpha areas may not work well in IE.
-- Kevin
-- Kevin
Leave a comment on Kevin B's reply
Using toggle, ive observed all image types and of all sizes, including animated gif and png, will freeze and then disappear, sometimes with a frame or two of animation. If they were located near the left side, then they will toggle in squeezed against it and then pop out, as if its just animating the height, and then finally the width. If they are center, then they will just pop in or sometimes animate in fine. Im using FF4. FF3, chrome, and opera will toggle out fine, but they just pop in when toggling in, except for FF3 which will show me a vertical line (animating only the height i guess).
With flv's, if i wrap them in a div and toggle that it will pop out and in and then animate fine out. Then toggled back in it will animate in fine, and once its ended it will pop out and disappear until i scroll.
Heres my project, take a look. I get the impression that jquery is unsupported so ill just leave it at that.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="savedstuff/jquery/jquery-1.4.4.js" type="text/javascript"></script>
<script src="savedstuff/jquery/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script src="savedstuff/jquery/JqueryUIstuff/css/smoothness/jquery-ui-1.8.9.custom.css" type="text/css"></script>
<style>
#box {}
.item {
position:absolute;
top:300px;
left:800px;
-moz-transition: all 2s ease 0s;
}
.menu {
position:absolute;
top:0px;
left:0px;
-moz-transition: all 2s ease 0s;
}
</style>
</head>
<body>
<div id="box">
<img src="images/menu.jpg" class="menu" name="menu" />
<img src="images/item.jpg" class="item" name="item" />
</div>
<script type="text/javascript">
$(function() {
$('img[name="menu"]').click(function() {
$('img[name="item"]').toggle(2000);
});
});
</script>
<!--<div id="box" name="video1">
<embed play="true" loop="false" name="video1" src="videos/720.swf" type="application/x-shockwave-flash" width="1280" height="720" wmode="transparent" class="menu" ></embed>
</div>
<script type="text/javascript">
$(function() {
$('img[name="menu"]').click(function() {
$('div[name="video1"]').toggle(2000);
});
});
</script>-->
</body>
</html>
With flv's, if i wrap them in a div and toggle that it will pop out and in and then animate fine out. Then toggled back in it will animate in fine, and once its ended it will pop out and disappear until i scroll.
Heres my project, take a look. I get the impression that jquery is unsupported so ill just leave it at that.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="savedstuff/jquery/jquery-1.4.4.js" type="text/javascript"></script>
<script src="savedstuff/jquery/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<script src="savedstuff/jquery/JqueryUIstuff/css/smoothness/jquery-ui-1.8.9.custom.css" type="text/css"></script>
<style>
#box {}
.item {
position:absolute;
top:300px;
left:800px;
-moz-transition: all 2s ease 0s;
}
.menu {
position:absolute;
top:0px;
left:0px;
-moz-transition: all 2s ease 0s;
}
</style>
</head>
<body>
<div id="box">
<img src="images/menu.jpg" class="menu" name="menu" />
<img src="images/item.jpg" class="item" name="item" />
</div>
<script type="text/javascript">
$(function() {
$('img[name="menu"]').click(function() {
$('img[name="item"]').toggle(2000);
});
});
</script>
<!--<div id="box" name="video1">
<embed play="true" loop="false" name="video1" src="videos/720.swf" type="application/x-shockwave-flash" width="1280" height="720" wmode="transparent" class="menu" ></embed>
</div>
<script type="text/javascript">
$(function() {
$('img[name="menu"]').click(function() {
$('div[name="video1"]').toggle(2000);
});
});
</script>-->
</body>
</html>
Leave a comment on 612wharfavenue's reply
Looks like a mixture of apathy and incompetence, ill just report this as a bug.
Leave a comment on 612wharfavenue's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to 612wharfavenue's question