[英]slide in effect when mouse-over
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.在我的视频列表中,我添加了一个名为“infobox”的 div,我希望它在鼠标悬停在缩略图上时从底部滑动。
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:这是 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>
assuming the .infobox is a child of li假设 .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");
});
});
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.
这是上面链接中用户 Dawson 提供的 jsfiddle,带有一个工作示例。
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");
});
});
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.我将您的 300 更改为 3000,因为它以毫秒为单位计算 1000 毫秒 = 1 秒。 also, you will need to add the 'bottom:60px;'
此外,您还需要添加“底部:60px;” CSS to your stylesheet aswell.
CSS 也添加到您的样式表中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.