Question

如果您查看emmawatson.com或ted.com，您会注意到有多个面板或div在悬停时调整大小。

在emmawatson.com，他们实际上会导致其他div根据正在盘旋的div动态调整大小。

我想使用click为某个边界内的div创建一个类似的效果。

如何做到这一点？

伪代码如下：

$(div*containing"input").function()
div*containing"input".resize(when input element is active)
otherDivs.move(get out of the way so this div can expand)
$(xButton).click(bring things back to their original size)

不要取笑我的伪代码。我是品牌打屁股的新手。：P

http://jsfiddle.net/JVtyv/9/

Answer 1

你一定要看jquery isotope http://isotope.metafizzy.co/demos/relayout.html。当您更改选择中元素的大小以及使许多其他元素布局解决方案非常简单时，此插件会重新计算元素布局。

它应该完全按照你的需要去做。

Answer 2

您可以在jQuery中使用hover()方法来执行此操作。

悬停方法的工作方式如下：hover（over，out）;插入要在“over”和“out”中进行的功能，然后进行设置。

因此，如果您想在emmawatson.com上调整div内的图像大小，您可以使用hover和css方法执行以下操作：

 $(function(){
$("div").hover(function(){
    $("div img").css({"height":"150%" , "width":"auto"}); //auto scales the width according to the image height
    },
    function(){
        $("div img").css({"height":"auto" , "width":"auto"}); //auto resizes image back to default dimensions
        });
});

只需使用像overflow:hidden;这样的CSS来剪切div中的图像，就可以了。

另外，请务必阅读jQuery documentation。它真的很奇怪！

如何使用jQuery动态调整元素和兄弟元素的大小？

2 个答案: