隐藏部分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 - 切换点击打开

回答

相关问题