jQuery Cycle Plugin & Hover Function Conflicting?

Question

У меня есть слайд-шоу на моей домашней странице, используя 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> 

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 или, как в обработчике .click, ищите .text и .more под номером li.activeSlide. Я предполагаю, что вы используете default activePagerClass option, если вы используете что-то еще, то соответствующим образом измените activeSlide.