Question

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

这是我需要的链接：

我想知道是否有办法在外出时做一些像消失的事情？ ......可能在完成动画时给予临时overflow: hidden。

Answer 1

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

Demo

或

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

Demo 2

Answer 2

你可以通过在元素移动到like this的位置绝对定位具有较高z-index的不透明元素来伪造它，但如果已经存在其他内容则这并不容易。

Answer 3

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

Answer 4

使用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>

隐藏容器外部的元素而不溢出：隐藏

4 个答案: