盒子阴影“跟随” Jquery 下滑效果
我制作了这个小视频(请忽略背景噪音)
13秒,但只需要看第5秒的动画; (或者访问 keepyourlinks.com 并等待几秒钟,直到您可以看到相同的框并单击)
css - 该项目同时具有classes-
.keepeos .top {
border-radius: 0.2em 0.2em 0.2em 0.2em;
color: #000066;
font-size: 40px;
height: 120%;
padding-bottom: 3px;
padding-top: 3px;
position: relative;
right: 10%;
top: -4px;
width: 120%;
}
.caja_con_sombra {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}
和 javascript(发布了完整的脚本,但对我认为唯一相关的行进行了评论。
<script type="text/javascript">
var variable;
function check_more(id){
var nID=$(".item_lista_links:first").attr("id"); //get the newest item's id
var tid= nID.replace('link', '');
$('#are_more').load('/includes/router.php?que=check_more&last='+tid+''); // check if newer
}
function buscar_nuevos(){
var nID=$(".item_lista_links:first").attr("id");
var id= nID.replace('link', '');
variable = setInterval('check_more('+id+')',15000); //start checking
}
function ver_nuevos(id){ // when found news and retrieving
clearInterval(variable);
$('#are_more').html(''); //clear div
/*THIS is basically the only relevant javascript line, i think */
$('#load_more').slideUp(100).load('/includes/router.php?que=load_more&last='+id+'',
function() {
variable = setInterval("check_more(139125)",15000);
$(this).slideDown(600); //start checking
return false;
});
}
</script>
那么我怎样才能防止这个阴影扩展整个垂直动画呢?
I made this tiny video (please ignore if background noises)
its 13 seconds but only need to see the animation going on in second 5; (or go keepyourlinks.com and wait few seconds untill you can se the same box and click)
The css -the item has both clases-
.keepeos .top {
border-radius: 0.2em 0.2em 0.2em 0.2em;
color: #000066;
font-size: 40px;
height: 120%;
padding-bottom: 3px;
padding-top: 3px;
position: relative;
right: 10%;
top: -4px;
width: 120%;
}
.caja_con_sombra {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
}
And the javascript (posted the full script but commented on the only, in my opinion, relevant line.
<script type="text/javascript">
var variable;
function check_more(id){
var nID=$(".item_lista_links:first").attr("id"); //get the newest item's id
var tid= nID.replace('link', '');
$('#are_more').load('/includes/router.php?que=check_more&last='+tid+''); // check if newer
}
function buscar_nuevos(){
var nID=$(".item_lista_links:first").attr("id");
var id= nID.replace('link', '');
variable = setInterval('check_more('+id+')',15000); //start checking
}
function ver_nuevos(id){ // when found news and retrieving
clearInterval(variable);
$('#are_more').html(''); //clear div
/*THIS is basically the only relevant javascript line, i think */
$('#load_more').slideUp(100).load('/includes/router.php?que=load_more&last='+id+'',
function() {
variable = setInterval("check_more(139125)",15000);
$(this).slideDown(600); //start checking
return false;
});
}
</script>
So how can i prevent this shadow to expand the whole vertical animation?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我仍然不确定发生了什么,但我知道如何解决它(至少现在是这样)。这可能是由于元素滑动与 jquery 中滑动元素中子元素的高度问题混合在一起,但我不确定。不管怎样:
知道了这一点,这里就有一个解决办法。在 estilo.css 中,找到将
其更改为:
如果变成多行,这将对您不利,因此如果您将来需要,也许您可以在滑动时切换标签,然后再切换完成后返回。
I'm still not exactly sure what's going on, but I know how to fix it (at least for now). It might be due to the element sliding in mixed with a height issue in jquery for elements that are children in the sliding element, but I'm not sure. Either way:
Knowing that, here is a fix. In estilo.css , find
Change that to:
This will work against you if that ever becomes multi-lined, so if you need to in the future, maybe you can switch the tag while sliding and then switch it back when it's done.