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

不透明度に関する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 に答える
0

移動するコンテナの を移動元のコンテナよりも小さく設定するz-indexと、探している効果が得られるはずです。

于 2012-09-22T23:42:55.630 に答える