如何使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