jQuery 动画的绝对定位

jQuery animate of an absolute positioning?

本文关键字：定位 动画 jQuery      更新时间：2023-09-26

我正在尝试让多边形与同级div 一起动画化。我认为它不是动画，因为它是绝对定位的？有没有办法让它与兄弟姐妹div 一起滑动？

这是一个小提琴：http://jsfiddle.net/Lzxmk5jp/2/

j查询：

$('.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>
这与

它们一起移动无关，您的箭头位于框外，当您使用.animate()时，它会在过渡期间隐藏溢出内容。你可以使.one-inner背景颜色的宽度更小，并将箭头保留在盒子内以使其一起移动（注意，你必须玩间距才能让它看起来更好，我的是一个简单的例子来解释行为）：

.one-inner{
   background-color:#ed7581;
   width:75%;
   height:370px;
}
.one .svg-right-arrow{
   position: absolute;
   left: 74%;
   top:0;
   z-index: 10;
   height:100%;
}

小提琴

我错误地认为这是一个position:absolute问题。问题是overflow:hidden，所以这是我发现的，在动画的结尾添加.css('overflow','visible');：

j查询：

$('.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/

相关文章：