Question

在我的视频列表中，我添加了一个名为＆＃34; infobox＆＃34;当鼠标悬停在缩略图上时，我希望它从底部滑动。

这是剧本：

<script>
$(document).ready(function(){
    $('ul.vlist li').mouseenter(function(){
        $('.infobox').animate({bottom : "20px"},300);
        $('.attachment-post-thumbnail').css("opacity" , "0.4");
    });

    $('ul.vlist li').mouseleave(function(){
        $('.infobox').animate({bottom : "-60px"},300);
        $('.attachment-post-thumbnail').css("opacity" , "1");
    });

});

问题是当鼠标悬停在缩略图上时，视频列表中其他视频的所有信息框也都有效。

这是HTML：

<ul class="vlist">

 <?php if(have_posts()) { ?>
<?php while (have_posts()) : the_post(); ?>
<?php if ( get_option('amn_group') == 'checked') {?>
<?php the_date('', '
<h2 class="title_bar">
    <span>', '</span>
</h2>'); ?>
<?php } ?>
<li class="video" id="video_
    <?php the_ID(); ?>">
    <a href="
        <?php the_permalink() ?>" title="
        <?php the_title(); ?>">
        <?php if ( has_post_thumbnail() ) { echo the_post_thumbnail();}else{ ?>
        <img src="
            <?php echo get_post_meta($post->ID, get_option('amn_thumbs'), true); ?>" width="320" height="160" alt="
            <?php the_title(); ?>" />
            <?php } ?>
            <i></i>
            <div class="infobox">
                <div class="videotitle">
                    <strong>
                        <?php short_title('...', '34'); ?>
                    </strong>
                </a>
            </div>
            <div class="infoboxborder">
                <div>
                    <div class="sponsor">By: 
                        <?php echo get_post_meta($post->ID, 'sponsered', true); ?>
                    </div>
                    <div class="videoTime">
                        <?php echo get_post_meta($post->ID, 'videolength', true); ?>
                    </div>
                </div>
            </div>
        </li>
        <?php endwhile; ?>
    </ul>

Answer 1

假设.infobox是li的孩子

$(document).ready(function(){
    $('ul.vlist li').mouseenter(function(){
        $('.infobox', this).animate({bottom : "20px"},300);
        $('.attachment-post-thumbnail').css("opacity" , "0.4");
    });

    $('ul.vlist li').mouseleave(function(){
        $('.infobox', this).animate({bottom : "-60px"},300);
        $('.attachment-post-thumbnail').css("opacity" , "1");
    });

});

Answer 2

这可能是this问题的重复。

使用此：

<script>
$(document).ready(function(){
    $('ul.vlist li').mouseenter(function(){
        $('.infobox', this).animate({bottom : "20px"},300);
        $('.attachment-post-thumbnail').css("opacity" , "0.4");
    });

    $('ul.vlist li').mouseleave(function(){
        $('.infobox', this).animate({bottom : "-60px"},300);
        $('.attachment-post-thumbnail').css("opacity" , "1");
    });
});
</script>

会给你想要的结果。 Here是一个由用户Dawson在上面的链接中提供的jsfiddle，带有一个工作示例。

Answer 3

试试这个：

$(document).ready(function(){
    $('ul.vlist li').mouseenter(function(){
       $(this).closest('.infobox').animate({bottom : "20px"},300);
       $(this).closest('.attachment-post-thumbnail'').css("opacity" , "0.4");
    });

    $('ul.vlist li').mouseleave(function(){
        $(this).closest('.infobox').animate({bottom : "-60px"},300);
        $(this).closest('.attachment-post-thumbnail'').css("opacity" , "1");
    });

});

Answer 4

幻灯片放映是使用持续时间属性时使用显示/隐藏的默认动画效果...或者您可以指定动画类型...这是您需要的：

<script>

$(document).ready(function(){
    $('ul.vlist li').mouseenter(function(){
        $('.infobox').show(3000);
        $('.attachment-post-thumbnail').css("opacity" , "0.4");
    });

    $('ul.vlist li').mouseleave(function(){
        $('.infobox').hide(3000);
        $('.attachment-post-thumbnail').css("opacity" , "1");
    });
});

</script>

我将300改为3000，因为它以毫秒为单位计算1000毫秒= 1秒。另外，你需要添加'bottom：60px;' CSS也可用于样式表。

鼠标悬停时滑动效果

4 个答案: