2

我想在元素移出容器时隐藏它。但我有 1 个限制：我不能overflow: hidden;在容器中用作永久样式。

这是我需要的链接：

http://jsfiddle.net/WVYpg/

我想知道是否有办法完成它，比如在它消失时消失？overflow: hidden...可能会在它完成动画时暂时给予。

4

4 回答 4

5 
$().ready( function(){
  $( "#hide-span" ).click( function(){
    $( ".contained" ).animate( {
        left: "-250",opacity:"0"
    }, 1000 );
  } );
} );​

演示

或者

$().ready( function(){
$( "#hide-span" ).click( function(){
    $( ".contained" ).animate( {
        left: "-250"
    }, 1000 );
    $( ".contained" ).fadeOut(200);
 } );
} );​

演示 2

于 2012-09-22T23:49:33.910 回答
2

您可以通过在元素移动到这样z-index的点处绝对定位一个更高的不透明元素来伪造它，但如果那里已经有其他内容，这并不容易。

于 2012-09-22T23:48:01.540 回答
0

您可以将z-index要移动的容器的 设置为小于要移出的容器，这应该提供您正在寻找的效果。

于 2012-09-22T23:42:55.630 回答
0

使用afshin关于不透明度的想法，我想通了。这是我的完整代码：（您可以在这里找到：http: //jsfiddle.net/WVYpg/3/）

CSS：

body{
    background: #0000ff;
    position: relative;
    z-index: 100;
}
div.container{
    width: 300px;
    height: 300px;
    background: #c3f1d3;
    margin: 50px auto;
    border: 1px solid #f00;
    position: relative;
    z-index: 50;
/*    overflow: hidden; */
}
div.contained{
    display: block;
    width: 200px;
    height: 200px;
    border: 1px solid #ff6600;
    margin: 50px auto 0px auto;
    position: relative;
    z-index: 0;
}
span.text-to-hide{
    display: block;
    border: 1px solid #0ec;
    width: 175px;
    font: bold 12px/20px "Trebuchet MS", Arial;
    text-align: center;
    margin: 75px auto;
    padding: 0px;
}
p{
    display: block;
    text-align: center;
    margin: 10px auto;
    padding: 0px;
}
input{
    width: 100px;
    font: bold 12px/20px "Trebuchet MS", Arial;
}
.ohidden{
    overflow: hidden;
}​

​ jQuery：

/* $().ready( function(){
    $( "#hide-span" ).click( function(){
        $( ".container" ).css( "overflow", "hidden" );
        $( ".contained" ).animate( {
            left: "-250"
        }, 1000, function(){
            $( ".contained" ).css( "opacity", "0" );
            $( ".container").css( "overflow" ); 
        } );
    } );
} );​ */
$().ready( function(){
    $( "#hide-span" ).click( function(){
        $( ".container" ).addClass( "ohidden" );
        $( ".contained" ).animate( {
            left: "-250"
        }, 1000, function(){
            $( ".contained" ).css( "opacity", "0" );
            $( ".container").removeClass( "ohidden" ); 
        } );
    } );
} );​

HTML：

<body>
    <div class="container" id="container">
        <div class="contained">
            <span class="text-to-hide">Move this text outside of container and hide it</span>
        </div>
        <p><input type="button" value="Hide span" id="hide-span"></p>
    </div>
</body>​
于 2012-09-23T00:11:26.883 回答