Уменьшение размера контента внутри конкретного блока

Рейтинг: 1Ответов: 1Опубликовано: 03.11.2014

Приветствую!

Ситуация такая: есть на странице список фоток с описанием (товары).

Задача: сделать при клике на кнопку + и - соответственно увеличение и уменьшение фоток, а также их описаний.

Сейчас я делаю примерно так (на самом деле кода намного больше):

animatesize(".miniimage","+",20);
animatesize(".model","+",20);
function animatesize(id,where,step)
{
$(id).animate({
          "width": where+"="+ step 
      }, 700);  
}

Грубо говоря, я для каждого элемента (фото, размер блока, размер шрифта для разных блоков) уменьшаю и увеличиваю.

Когда на странице много увесистых фото - это реальная проблема. Браузер виснет на несколько секунд, пока проресайзит, кроме того, размеры не всегда корректно считываются в разных браузерах.

Вопросы:

  1. Есть ли возможность, не варганя кучу нелепого кода, ресайзить пропорционально весь контент внутри заданного блока? Может, можно как-то эмулировать контрол+колесо мыши для определенного куска страницы?
  2. Есть ли возможность сделать это как-то так, чтобы браузер более-менее быстро реагировал на эти действия?

Заранее благодарю!

Ответы

▲ 1

Попробуйте сделать без jquery animate, а плавное изменение ширины с помощью css transition.