slide in effect when mouse-over

Question

In my video list I add a div called "infobox" and I want it to slide from the bottom when mouse is over a thumbnail.

This is the script:

<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");
    });

});

The problem is when the mouse is over a thumbnail, all the infoboxes of the other videos in the video list are active too.

This is the 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

assuming the .infobox is a child of 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 may be a possible duplicate of this issue.

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

Would give you the result you want. Here is a jsfiddle that is provided by user Dawson in the link above, with a working example.

Answer 3

Try this:

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

Slide in is the default animation effect of using show/hide when using a duration attribute... or you can specify the animation type... here's what you need:

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

I changed your 300 to 3000 as it counts in milliseconds 1000ms = 1s. also, you will need to add the 'bottom:60px;' CSS to your stylesheet aswell.