隱藏部分div - 切換點擊打開

我知道如何切換整個div，但是我只想隱藏除前10％或前100px之外的所有內容，例如。然後當div被點擊時，整個div打開。隱藏部分div - 切換點擊打開

我以爲我前一陣子看到了這個，但不記得在哪裏。

謝謝。

$(document).ready(function() { 
// hides the slickbox as soon as the DOM is ready 
    $('#slickbox').hide(); 

// toggles the slickbox on clicking the noted link 
    $('#slick-toggle').click(function() { 
$('#slickbox').toggle(400); 
return false; 
    }); 
});

來源

2011-01-11 Jason

你的代碼應該是在該行：

$(document).ready(function() { 
    // hides the slickbox as soon as the DOM is ready 
    $('#slickbox').animate({height: '20px'}); 

    // toggles the slickbox on clicking the noted link 
    $('#slick-toggle').click(function() { 
     $('#slickbox').animate({height: '100%'}); 
     return false; 
    }); 
});

來源

2011-01-11 21:19:52 k3liutZu

崩潰我的其他功能 – Jason 2011-01-12 00:46:10

看看我的主頁上的圖像，這種你想做的是什麼？ http://www.carsonshold.com/

當你將鼠標懸停在它上面時，它會噴射出來，但可以很容易地將它改爲點擊。這樣做有點複雜，並且在IE中還不完美（頁面加載並且只有將鼠標懸停在剪輯上之後才能識別剪輯）。

它可能與你想要的稍有不同，因爲我在圖像上而不是div上做了這個，所以我需要爲剪貼蒙版設置動畫效果。我使用的功能如下：

var featureDuration = 300; //time in miliseconds 

    $('#featured-img').hover(function() { 
     $(this).animate({ left : "-164", clip: "rect(0px,384px,292px,0px)" },{queue:false,duration:featureDuration});    
    }, function() { 
     $(this).animate({ left : "17px", clip: "rect(0px,203px,292px,0px)" },{queue:false,duration:featureDuration}); 
    });

如果你想動畫剪輯，你將需要插入這個JS也因爲它不檢點，否則。 http://www.overset.com/2008/08/07/jquery-css-clip-animation-plugin/

就拿在我的代碼來看看CSS，如果你不確定我是如何做它的其餘部分，或者如果你有任何問題，在這裏發表評論。

乾杯

來源

2011-01-11 21:12:25 Carson

這樣做很快，注意它只會隱藏底部。

http://jsfiddle.net/loktar/KEjeP/

簡單的切換，改變高度，躲在內的其餘內容。易於動畫，只需修改切換功能來調整高度，而不是添加課程。

來源

2011-01-11 21:16:05 Loktar

不能與我的jQuery控制的佈局工作。在我擴大和縮小div之後，它顯示爲50px高。 – Jason 2011-01-12 00:38:07

隱藏部分div - 切換點擊打開

回答

相關問題