jQuery Forum

Hi,

I have a bunch of video thumbnails on a site I am working on. When a user mouses over the thumb I would like an image (imgPlay) to fade in ontop of the thumbnail. imgPlay should now be under the mouse so when the user's mouse leaves imgPlay I would like it to disappear. Sounds simple but I'm having all sorts of trouble.

The site is here:
http://craft-e.com/new/

This is the current code that handles the mouseenter event:

        $('.video-thumb').mouseenter (
            function(e) {
                var el = $('#video-thumb-play')
                var thisOff = $(this).offset()
                el.offset({top: thisOff.top, left: thisOff.left})
                //el.css('top', thisOff.top)
                //el.css('left', thisOff.left)
                //el.css({ opacity: 0.1 })
                el.fadeIn('slow')
                // alert(thisOff.top + ':' + thisOff.left)
                //el.offset.left = this.offset.top
                $('#scratch').html($('#scratch').html() + '<br />vt: enter: ' + thisOff.top + ':' + thisOff.left + ' -- ' + el.offset().top + ':' + el.offset().left)
            }
        )

It gets the imgPlay element ($('#video-thumb-play')) and sets its offset to that of the thumbnail that was moused over. It fades in imgPlay then it prints out to '#scratch' the offsets of the two elements.

The problems are:
      For some reason the offset position seems to toggling so you get the output going like this:

vt: enter: 983:826 -- 1366:1652
vt: enter: 983:826 -- 983:826
vt: enter: 983:826 -- 1366:1652
vt: enter: 983:826 -- 983:826

Also, when imgPlay is visible, if you scroll the page then imgPlay stays in the same place relative to the view port, rather than relative to the rest of the elements in the document.

[tested in firefox and chrome]

Any help would be much appreciated.

Thanks.