JQuery：结合动画 CSS 和淡入淡出

Posted 2023-05-08

【中文标题】JQuery：结合动画 CSS 和淡入淡出

【英文标题】：JQuery: Combining animate CSS and fadeIn

【发布时间】：2013-11-27 22:16:36

【问题描述】：

这是我的脚本：

$("#headerimage").animate(marginLeft:"0",300);

我还想添加“淡入淡出”以同时以完全相同的速度启动。这是怎么做到的？

【参考方案1】：

通过动画不透明度：

$("#headerimage").animate(
    marginLeft: 0,
    opacity   : 1
, 300);

如果用 display:none 隐藏，先显示：

$("#headerimage").css(
    opacity : 0,
    display : 'block' // or whatever
).animate(
    marginLeft: 0,
    opacity   : 1
, 300);

【参考方案2】：

$("#headerimage").animate(
    marginLeft:"0",
    opacity: 1
,300);