What is wrong with this simple jQuery slideUp and slideDown?

Question

Hello,

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 IE, but not in FF 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>

Thanks Jean

Answer 1

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 2

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 3

there could be a lot of things.
if the image #view is has fixed or is showed over the position of the thumbnail ill fire a mouseout in the thumbnail at the moment you show up. Other thing that may cause that the #view hide instantainly 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 IE and look how the document its modified.

Answer 4

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>