What is wrong with this simple jQuery slideUp and slideDown? - php

Question

I want to display the image actual view when the mouse is over the thumb sized image. But when the mouse is placed over the first image it appears and then disappears, not the case with the second and following images.
It works perfectly fine in Internet Explorer, but not in Firefox or Chrome.
$file - runs displays all the files in a directory
$id_v - is a simple count on the number of files
$path1 - is the path
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#view').hide();
$('#ig<? echo $id_v; ?>').bind('mouseover', function(ev) {
$('#view').slideDown();
$("#view1").attr({ src: "<? echo $path1.'/'.$file?>" });
});
$('#ig<? echo $id_v; ?>').bind('mouseout', function(ev){
$('#view').slideUp();
});
});
</script>

Answer 1

Please note, my interpretation of your HTML may be completely wrong. Please post all relevant code with your questions. --help us, help you. :op
Please also note (in case you were unaware) that you can edit your question to update with relevant info.
Can't say for sure without seeing HTML, but consider the following:
$('#view').hide();
Here 'view' is an id. IDs must be unique. You can't have them assigned to more than one element.
I'm assuming each item that you want to animate is getting id='view' in your HTML, when you should be doing class='view' in HTML with the following in your javascript:
$('.view').hide()
etc...
Give that a try.

Answer 2

It's hard to tell (for me) without live example...
Did you try to :
preload you images (with css
technique or with preload jQuery
plugin) ?
change mouseover/mouseout by
mouseenter/mouseleave ?
Just for information, in jQuery 1.4, you could use multiple events.
So your code could be rewritten like this :
$('#ig<? echo $id_v; ?>').bind({
mouseover: function() {
$('#view').slideDown();
$("#view1").attr({ src: "<? echo $path1.'/'.$file?>" });
},
mouseout: function() {
$('#view').slideUp();
}
});

Answer 3

I would suggest using the hover method instead of the mouseover and mouseout:
<script language="javascript" type="text/javascript">
$(function() {
$('#view').hide();
$('#ig<? echo $id_v; ?>').bind('hover',
// over
function() {
$('#view').slideDown();
$("#view1").attr({ src: "<? echo $path1.'/'.$file?>" });
},
// out
function() {
$('#view').slideUp();
}
);
});
</script>
I would also suggest (to make your life a little easier), instead of binding new methods to each new id, just assign a class to each one of them and use
<script language="javascript" type="text/javascript">
$(function() {
$('#view').hide();
$('.some-class').hover(
// over
function() {
$('#view').slideDown();
$("#view1").attr({ src: "<? echo $path1.'/'.$file?>" });
},
// out
function() {
$('#view').slideUp();
}
);
});
</script>

Answer 4

There could be a lot of things.
If the image #view is fixed or is showed over the position of the thumbnail it will fire a mouseout in the thumbnail at the moment you show up.
Another thing that may cause that the #view hide instantaneously is that the element #view modifies the position of the whole document, if it is on the top or something like that.
Try to remove the mouseout bind and load the page with Internet Explorer and look how the document is modified.