鼠標懸停時滑動生效

Question

在我的視頻列表中，我添加了一個名為“infobox”的 div，我希望它在鼠標懸停在縮略圖上時從底部滑動。

這是腳本：

<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

這可能是此問題的重復。

使用這個：

<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>

會給你你想要的結果。 這是上面鏈接中用戶 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 秒。 此外，您還需要添加“底部：60px；” CSS 也添加到您的樣式表中。