[英]slide in effect when mouse-over
在我的视频列表中,我添加了一个名为“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>
假设 .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");
});
});
这可能是此问题的重复。
使用这个:
<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,带有一个工作示例。
尝试这个:
$(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");
});
});
滑入是使用持续时间属性时使用显示/隐藏的默认动画效果……或者您可以指定动画类型……这是您需要的:
<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 也添加到您的样式表中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.