在沒有溢出的情況下隱藏容器外部的元素：隱藏

$().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

來源

2012-09-22 23:49:33 Afshin

雖然這個選項給了我最終的解決方案（它移動並隱藏了它的容器外的元素），但它不提供我期待的效果。我真正想要的是在它外出時隱藏它。 – Tales

@Tales：你的隱藏意思是什麼？這是在它外出時在視覺上隱藏它。如果你真的想隱藏它在'.hide（）'你的CSS會搞砸，你的按鈕移動到你的容器的頂部。 – Nope

那麼，你給了我一個好主意。從不透明度例子開始，我創建了一個自定義函數，它向容器元素添加了overflow：hidden，啓動動畫，並且在完成後，它給出包含元素的不透明度：0，然後從容器中移除overflow：hidden。我將發佈下面的示例，但這是您的示例的鏈接：http://jsfiddle.net/WVYpg/3/ – Tales

使用阿夫欣的有關透明度的想法，我理解了它。這是我的完整代碼：（您可以在這裏找到：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-23 00:11:26 Tales

您不需要不透明。當你添加'$（「.container」）.css（「overflow」，「hidden」）;它看起來沒有不同，有或沒有不透明度。另外你有冗餘代碼，看到你已經在函數的開始處添加了溢出CSS，你不需要在回調中再次添加行。儘管你在回調函數$（「.container」）.css（「overflow」）中的行實際上並沒有做任何事情。理論上你的整個回調是多餘的，不需要你需要的只是你的第一個附加行:) – Nope

我認爲你錯了。在我使用腳本的開始處：$（「.container」）.css（「overflow」，「hidden」）;我給溢出屬性能夠做動畫。當動畫完成時，正如我前面所述，我不能在容器上擁有一個永久性溢出屬性，我必須處理它，從容器中移除屬性，但在使其邊界可見之前，我需要隱藏所有內容，這就是$（「.contained」）.css（「opacity」，「0」）;.最後$（「.container」）.css（「overflow」）;在代碼的最後，我將刪除該屬性，而不是添加它。 – Tales

對不起，我想說的是：你的回調不像你期望的那樣工作。 'overflow：hidden'是**不被刪除。請運行你的小提琴和鉻例如使用調試工具，並檢查你的HTML，它顯示你隱藏的溢出仍然存在。您也可以通過簡單地刪除線來設置不透明度來測試它，理論上最終應該使div可見，但它不會在調用完成後仍然應用於容器。 – Nope

在沒有溢出的情況下隱藏容器外部的元素：隱藏

回答

相關問題