Как я могу динамически изменять размеры элементов и родственных элементов, используя jQuery?

Question

Если вы посмотрите на emmawatson.com или ted.com, вы заметите, что есть несколько панелей, или div, которые изменяют размер при наведении.

На emmawatson.com они фактически приводят к тому, что другие div динамически изменяют размер в зависимости от того, где он находится.

Я хотел бы создать аналогичный эффект, используя щелчок, для элементов 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 http://isotope.metafizzy.co/demos/relayout.html. Этот плагин пересчитывает макет элемента при изменении размера элемента в выделении, а также делает элегантными простыми многие решения для макетов элементов.

Он должен делать именно то, что вам нужно.

Answer 2

Для этого вы можете использовать метод hover() в jQuery.

Метод наведения работает так: hover (over, out);вставьте функции, которые вы хотите использовать для "over" и "out", и все готово.

Так что, если вы хотите изменить размер изображений внутри div, как на emmawatson.com, вы бы сделали что-то вродеследующие методы 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
        });
});

Просто используйте CSS, например overflow:hidden;, чтобы обрезать изображение внутри div, и все готово.

Также убедитесь, чтопрочитать документацию jQuery .Это делает чудеса!