jQuery 循环插件和悬停函数冲突？答案

【问题标题】：jQuery Cycle Plugin & Hover Functions Conflicting?jQuery 循环插件和悬停函数冲突？
【发布时间】：2011-02-07 14:35:44
【问题描述】：

我的主页上有一个幻灯片，使用 jQuery Cycle plugin。标记非常简单，我使用#slide ul 作为幻灯片容器，#slide ul li 作为每张幻灯片。在每个幻灯片项目中，它都会在帖子缩略图的顶部显示标题。

当您将鼠标悬停在缩略图上时，内容摘录会淡入，当您将鼠标悬停在图片之外时，内容摘录会淡出。我面临的问题是，当我将鼠标悬停在其中一个缩略图上时，所有内容摘录都会淡入（当然，您看不到其他内容，但我知道它们会这样做，因为当幻灯片切换到新幻灯片时，下一张幻灯片的内容摘录已经显示）。

我需要知道的是，如何仅使用 jQuery 使特定幻灯片的内容摘录淡入淡出，而不是全部淡入淡出？

希望有人能回答我的问题，我总是投票选出最佳答案。

这是我的 jQuery 代码：

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

对于幻灯片：

<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>

【问题讨论】：

你能发布你的任何代码吗？
@Andrew Whitaker：我用我的代码更新了我的问题，谢谢。
我添加了循环插件的链接，希望我得到了正确的。

标签： jquery jquery-cycle

【解决方案1】：

我认为您的问题是您的选择器过于笼统。试试这个：

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

基本思想是您只想为当前幻灯片的摘录和链接设置动画。您可以通过将悬停添加到<li> 元素，然后从那里搜索.text 和.more 或在.click 处理程序中，通过在@ 下查找.text 和.more 来获得它987654329@。我假设您使用的是default activePagerClass option，如果您使用的是其他东西，请适当更改activeSlide。

【讨论】：