我正在尝试使多边形与同级div关联。我认为由于处于绝对位置而没有进行动画处理吗?有没有办法让它与同胞div一起滑动?
这是一个小提琴:http : //jsfiddle.net/Lzxmk5jp/2/
jQuery的:
$('.one').on('click',function(){
var width = $('.one').width(),
parentWidth = $('.one').offsetParent().width(),
percent = 100*width/parentWidth;
if(percent < '34'){
$('.one').animate({
width:'66%'
}, 1000),
$('.one .svg-right-arrow').animate({
left:'100%'
}, 1000)
}
if(percent > '34'){
$('.one').animate({
width:'34%'
}, 1000),
$('.one .svg-right-arrow').animate({
left:'100%'
}, 1000)
}
});
的HTML:
<div class="cont">
<div class="one">
<div class="one-inner"></div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-right-arrow" viewBox="0 0 20 152" preserveAspectRatio="xMinYMid meet">
<polygon points="0,0 0,152 20,76"></polygon>
</svg>
</div>
</div>
我认为这是一个position:absolute
问题的错误。问题是overflow:hidden
,所以这是我发现的内容,添加.css('overflow','visible');
到动画的末尾:
jQuery的:
$('.one').on('click',function(){
var width = $('.one').width(),
parentWidth = $('.one').offsetParent().width(),
percent = 100*width/parentWidth;
if(percent < '34'){
$('.one').animate({
width:'66%'
}, 1000).css('overflow','visible');
}
if(percent > '34'){
$('.one').animate({
width:'34%'
}, 1000).css('overflow','visible');
}
});
这是一个小提琴:http : //jsfiddle.net/Lzxmk5jp/7/
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句