jQuery动画的绝对定位?

奇佩

我正在尝试使多边形与同级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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章