jQuery 动画绝对定位?
jQuery animate of an absolute positioning?
我正在尝试让多边形与兄弟 div 一起制作动画。我认为它不是动画,因为它是绝对定位的?有没有办法让它和兄弟一起滑动div?
这是一个fiddle: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>
这与它们一起移动无关,您的箭头位于框外,当您使用 .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');
:
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');
}
});
这是一个fiddle:http://jsfiddle.net/Lzxmk5jp/7/
我正在尝试让多边形与兄弟 div 一起制作动画。我认为它不是动画,因为它是绝对定位的?有没有办法让它和兄弟一起滑动div?
这是一个fiddle: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>
这与它们一起移动无关,您的箭头位于框外,当您使用 .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');
:
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');
}
});
这是一个fiddle:http://jsfiddle.net/Lzxmk5jp/7/