动画显示行内嵌入更改

问题描述：

我试图创建一个粘滞标题，它在页面滚动时更改大小。我想要实现的一个主要功能是标题中的图像缩小并向左移动。动画显示行内嵌入更改

到目前为止，我已经缩小了所有的动画效果。我也有移动到左边工作，但它不动画。

在jQuery中我打电话

$('#page_header_logo_img').css({ 
    "padding-left":"20%", 
    "display":"inline" 
})

在一个点上，然后再打

$('#page_header_logo_img').css({ 
    "padding-left":"0", 
    "display":"block" 
})

这对于移动它正是我想要......唯一的问题是精美的作品它跳到那里。

我试过合并jQuery Animate效果，但无法使其正常工作。

Here is a JSFiddle of what I currently have 我所需要的只是左右移动平稳而不是瞬间。

编辑答案

我接受了我最接近答案，而且还回答我提出的问题。然而，它并没有完全让我想要的东西，所以我想我会在这里发布最终的解决方案。

我将图像更改为position: absolute;，然后动态设置边距和左侧属性。

You can see a working JSFiddle here

'display'不是可转换特性。抱歉。不可能做到。 –

这里你是一个CSS动画属性列表：https：//developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties –

答

，如果你愿意，你可以使用.animate()而不是.css()但你可以使用它display因为display不会.animate()工作的动画效果。

休息的功能会是这样

var scrolPos = $(window).scrollTop(); 
if(scrolPos>100){ 
    $('#page_header_logo_img').animate({ 
    paddingLeft:"20%" 
    }); 
} else { 
    $('#page_header_logo_img').animate({ 
    paddingLeft:"0" 
    }); 
};

可能会接受这个答案，因为它使我最接近，但是我改变填充边距，但现在不会切换回自动https://jsfiddle.net/ka5jj0ay/6/ –

是的，BT不是完美的解决方案...它是一种奇怪的行为，汽车不工作休息价值正在工作 –

我认为它是因为jQuery需要一个数字，因此新的计算 –

答

您可以考虑使用CSS转换。

将transition: padding-left 0.3s ease-in-out;添加到#page_header_logo_img的样式，向左移动时会给它一个动画过渡。

请参阅here在您的JSFiddle中。它不是很精美，但你可以看到如何使用CSS转换。有关CSS转换的更多信息，请参阅this。

答

你只是改变CSS属性，因此有一个跳跃。

使用jQuery .animate()方法进行平滑过渡。改变你的代码如下。

$('#page_header_logo_img').animate({ 
    "padding-left": "20%", 
    "display": "inline" 
})

和

$('#page_header_logo_img').animate({ 
    "padding-left": "0", 
    "display": "block" 
})

动画显示行内嵌入更改

相关推荐