Search jQuery

jQuery Forum

Using jQuery

pinksmart..

Simple Fade and Hide Problem

in Using jQuery • 10 years ago

Basically I am displaying a images in a row.

Each image will have a mouseover and out event, like so

function fadeIn(a) { jQuery(a).find(".thumbnail").fadeTo("slow", 0.7);
jQuery(a).find(".thumbnailText").show('fast'); }

The mouse over will show a div container which lies on top of the image.

When I mouse of the image away from the area where the new div appears its fine.

However when I move over the new div it repeatable appears and disappears.

The reason for this I reckon is because its being read as the mouse is moving out of the div with the event if this makes sense.

Any input would be great thanks.

echo '<div style="height:200px ;float:left;" onmouseover="fadeIn(this);" onmouseout="fadeOut(this);">';
echo '<a href="' . get_permalink( $thumbnail->ID ) . '" title="' . esc_attr( $thumbnail->post_title ) . '" >';
echo get_the_post_thumbnail($thumbnail->ID, array(230,230), array('class' => 'thumbnail'));
echo '</a>';
echo '<div class="thumbnailText">'.$thumbnail->post_title.'</div>';
echo '</div>';

This is the part where the event is if this helps

Replies(2)

kbwood.au

Re: Simple Fade and Hide Problem

10 years ago

Use mouseenter/mouseleave instead as this only triggers for the container as a whole and not for contained elements. You can simplify the code by using the hover convenience function:

$('div.container').hover(function() {
$(this).find('.thumbnail').stop(true, true).fadeTo('slow', 0.7).end().
find('.thumbnailText').stop(true, true).show('fast');
}, function() {
$(this).find('.thumbnail').stop(true, true).fadeTo('slow', 1.0).end().
find('.thumbnailText').stop(true, true).hide('fast');
});

pinksmart..

Re: Simple Fade and Hide Problem

10 years ago

Hello kbwood,

Thanks for your reply, I actually worked it out several hours after the post.

However my code is virtually the same as what you posted, Thanks for the information.

Top Reply

Response title

Attachments

jQuery Forum

Simple Fade and Hide Problem

Replies(2)

Re: Simple Fade and Hide Problem

Re: Simple Fade and Hide Problem

Statistics

Tags

Actions