javascript - 如何使 jQuery 动画仅显示在 div 容器/横幅中

Question

我正在制作一个在容器/横幅内同时从底部淡入和动画的图像。

容器样式:

#nix_banner {
margin: auto;
background: #1f1f1f;
width: 1200px; 
height: 300px;
}

脚本:

 $('#wavy')
    .hide()
    .fadeIn({queue: false, duration: 3000})
    .animate({'bottom': '355px'}, 3000);

考虑网页顶部的广告。当广告中出现动画时，用户不会看到广告横幅上有任何内容。两个动画都有效，但我不希望图像显示在横幅之外的任何地方。我应该怎么做才能只保留容器内的内容可见？

我也对任何完整的替代方案持开放态度。

Answer 1

尝试添加overflow:hidden;:

#nix_banner {
    margin: auto;
    background: #1f1f1f;
    width: 1200px; 
    height: 300px;
    overflow: hidden;
}

jsfiddle demo