jQuery Cycle Plugin & Hover Functions Conflicting?

Question

I have a slideshow on my homepage using the jQuery Cycle plugin. The markup for that is pretty simple, I used #slide ul as the slideshow container and #slide ul li as each slide. Inside each of these slideshow items, it displays the title on top of the posts thumbnail.

When you hover over the thumbnail, the content excerpt fades in and when you hover off of the image, the content excerpt fades out. The problem I'm facing is that when I hover over one of the thumbnails, ALL of the content excerpts fade in (granted, you can't see the other ones, but I know they do because when the slideshow switches to a new slide, the content excerpt for the next slide is already showing).

What I need to know is how can I make only the content excerpt for that specific slide fade in and out instead of all of them using jQuery?

Hope someone can answer my question, I always vote up and pick a best answer.

Here's my jQuery code:

$(document).ready(function() {
    $('#slide ul').cycle({
        fx: 'turnDown',
        next:   '#slidenext', 
        prev:   '#slideprev',
        speed: 600,
        delay: 3000
    });
    $('#slide ul').hover(function() {
        $(this).cycle('pause');
        $('#slideshow ul .text, #slideshow ul .more').animate({opacity: 'show'});
    },function() {
        $(this).cycle('resume');
        $('#slideshow ul .text, #slideshow ul .more').animate({opacity: 'hide'});
    });
    $('#slidenext, #slideprev').click(function() {
        $('#slideshow ul .text, #slideshow ul .more').animate({opacity: 'hide'});
    });
});

And for the slideshow:

<div id="slide">
    <ul>

        <?php $my_query = new WP_Query('posts_per_page=3');
            if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post();
            $do_not_duplicate = $post->ID;?>
        <li>
            <!-- slide content -->
            <img src="<?php bloginfo('template_url'); ?>/images/slide-post-thumb.png" width="750" height="220" alt="" />
            <h1><a href="<?php the_permalink(); ?>" title="Permanent link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>
            <div class="text"><?php the_excerpt(); ?></div>
            <div class="more"><a href="<?php the_permalink(); ?>" title="Read the story <?php the_title(); ?>">Read Story</a></div>
        </li>

        <?php endwhile; else : ?>
            <p>Sorry, no posts found!</p>
        <?php endif; ?> 
    </ul>
</div>

Answer 1

I think your problem is that your selectors are too general. Try this instead:

$('#slide ul li').hover(function() {
    var $li = $(this);
    $li.closest('ul').cycle('pause');
    $li.find('.text, .more').animate({opacity: 'show'});
},function() {
    var $li = $(this);
    $li.closest('ul').cycle('resume');
    $li.find('.text, .more').animate({opacity: 'hide'});
});
$('#slidenext, #slideprev').click(function() {
    $('#slideshow ul li.activeSlide').find('.text, .more').animate({opacity: 'hide'});
});

The basic idea is that you only want to animate the excerpt and link for the current slide. You can get that by adding the hover to the <li> elements and then searching from there for the .text and .more or, as in the .click handler, by looking for .text and .more under li.activeSlide. I'm assuming that you're using the default activePagerClass option, if you're using something else then change activeSlide appropriately.