【问题标题】:jQuery hover in Wordpress: fading in a hidden div while fading out the “default” onejQuery 悬停在 Wordpress 中:淡入隐藏的 div,同时淡出“默认”的
【发布时间】:2011-11-09 13:49:52
【问题描述】:

我在使用 jQuery 的悬停功能和 Wordpress 循环时遇到问题。每次我悬停一个图像(有 6 个)时,它们都会消失,而不仅仅是单个图像。请帮忙。

这是我的代码:

<?php query_posts('showposts=6&cat=-4'); ?>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); if ( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>

<li class="show1">

<?php $thumb = get_post_meta($post->ID, 'thumb', true); ?>

<a href="#" title="Permanent Link to <?php the_title_attribute(); ?>" class="show"><?php echo$thumb; ?></a>

<div class="hide">

    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

    <?php the_excerpt(); ?>

    <a class="view_project" href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">View Project »</a>
</div>
</li>

我的 Javascript 是

<script type="text/javascript">
$(function() {
$('li.show1').children('.hide').hide();

$('li.show1').hover(function() {
    $(this).children('a.show').fadeOut('slow')
        .end().children('.hide').fadeIn('slow');
}, function() {
    $(this).children('a.show').fadeIn('slow')
        .end().children('.hide').fadeOut('slow');
});
});
</script>

谢谢大家。

【问题讨论】:

    标签: javascript jquery wordpress hover fadein


    【解决方案1】:

    将$('a.show') 替换为$(this).children('a.show') - 这会将您的淡出限制为悬停在li 内的锚链接。

    【讨论】:

    • 非常感谢。现在只选择了一个,但是fadeIn和fadeOut效果不起作用,有什么建议吗?
    • 可能是因为你的hover 回调函数是相同的,而不是互惠的?
    • 我也是这么想的,但我改了(上面编辑过),什么也没发生。
    • 编辑了我的答案。这是你想要的效果吗? jsfiddle.net/mblase75/fqqYe
    • 我确实注意到悬停效果在第一次悬停后就消失了。我一直在寻找保持 jQuery 效果重复但没有运气的方法,有什么建议吗?
    猜你喜欢
    • 1970-01-01
    • 2014-01-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-11-16
    • 2011-01-25
    • 1970-01-01
    相关资源
    最近更新 更多