jQuery цикл плагин и парящие функции конфликтуют? - PullRequest
Новая
       5

jQuery цикл плагин и парящие функции конфликтуют?

2 голосов
/ 07 февраля 2011

У меня есть слайд-шоу на моей домашней странице с использованием плагина jQuery Cycle .Разметка для этого довольно проста, я использовал #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>

1 Ответ

2 голосов
/ 07 февраля 2011

Я думаю, что ваша проблема в том, что ваши селекторы слишком общие.Попробуйте вместо этого: 

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

Основная идея заключается в том, что вы хотите анимировать только отрывок и ссылку для текущего слайда.Вы можете получить это, добавив элемент hover к элементам <li>, а затем оттуда выполните поиск .text и .more или, как в обработчике .click, отыщите .text и .more в разделе li.activeSlide.Я предполагаю, что вы используете по умолчанию activePagerClass параметр , если вы используете что-то другое, измените activeSlide соответствующим образом.

...