jQueryサイクルのプラグインとホバーの機能が矛盾していますか？

Question

jQuery Cycle pluginを使用して私のホームページにスライドショーを持っています。そのマークアップはとてもシンプルですが、私はスライドショーコンテナとして#slide ulを使用し、スライドごとに#slide ul liを使用しました。これらのスライドショーの各項目の内側には、投稿のサムネイルの上にタイトルが表示されます。

サムネイルにカーソルを合わせると、コンテンツの抜粋がフェードインし、画像の上にマウスを移動するとコンテンツの抜粋が消えます。私が直面している問題は、サムネイルの1つにカーソルを合わせると、すべてのコンテンツの抜粋が消えてしまうことです（他のものは表示されませんが、スライドショーが新しいスライドに切り替わると次のスライドのコンテンツの抜粋がすでに表示されています）。

私が知る必要があるのは、特定のスライドのコンテンツ抜粋のみを、すべて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> 

Answer 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、またはハンドラのように、.textと.moreをli.activeSlideの下に検索することで、それを得ることができます。私はあなたがdefault activePagerClass optionを使用していると仮定しています。何か他のものを使用している場合は、activeSlideを適切に変更してください。