CODEWITHSUNDEEP
phpjquery
X10nD
X10nD

Reputation: 22050

What is wrong with this simple jQuery slideUp and slideDown?

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>

Upvotes: 1

Views: 395

Answers (4)

useless
useless

Reputation: 1906

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.

Upvotes: 0

Rabbott
Rabbott

Reputation: 4332

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>

Upvotes: 0

user113716
user113716

Reputation: 322562

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.

Upvotes: 1

Alysko
Alysko

Reputation: 347

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();
  }
});

Upvotes: 0

Related Questions