2

jQuery Cycle プラグインを使用してホームページにスライドショーを掲載しています。そのためのマークアップは非常にシンプルで#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>
4

1 に答える 1

2

あなたの問題は、セレクターが一般的すぎることだと思います。代わりにこれを試してください：

$('#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>そこから.textand .moreor を検索することで取得できます。ハンドラーと同様に、and under.clickを探します。デフォルトのオプションを使用していると仮定しています。他のオプションを使用している場合は、適切に変更してください。.text.moreli.activeSlideactivePagerClassactiveSlide

于 2011-02-07T06:35:44.820 に答える