.animate () и функция масштабирования - PullRequest
Новая
       27

.animate () и функция масштабирования

0 голосов
/ 10 декабря 2011

Мне нужно создать галерею, которая зависит от нескольких факторов и выполняет серию изображений, масштабированных по размеру.В любом случае, мне нужно, чтобы при нажатии на кнопку «триггер» главный контейнер занимал почти всю видимую область видового экрана, а изображения содержали респектабельный масштаб, если соотношение.

Я следую этой ссылке

Поведение, которое я не могу сделать, это увеличить изображение.При нажатии на один из них большие пальцы исчезают, а основное изображение масштабируется.Этот мой код выглядит следующим образом:

Функция, которую я использую для увеличения изображений, которые я делаю на основе небольшой статьи, которую я прочитал о методе jQuery .animate (). 

function resize(){ 
gallery = $('#items'); 
galleryH = gallery.height(); 

$('#items img').each(function() { 
    var height = $(this).height(); 
    $(this).stop(true).animate({'height':galleryH},1000); 
    }); 
} 
resize();

Согласноэтот метод «оживляет» только высоту, ширина автоматически тем самым поддерживает соотношение.Кажется, это работает правильно.Как вы видите выше, масштабируется в зависимости от высоты его контейнера.

Хорошо, это хорошо работает, когда страница загружается и при масштабировании размера окна.Тогда мне нужно, чтобы при нажатии на контейнер или другую кнопку / firer окно заполняло окно, аналогично тому, что происходит в прилагаемом примере, и изображения масштабируются в соответствии с этим размером.Как в примере.Для этого используйте следующий код: 

function changeView(){ 

    if(gallery.hasClass("largeExp")){ 
        gallery.removeClass("largeExp"); 
            gallery.stop(true).animate({'height':'200px'},500); 
            console.log("Normal Mode"); 
        } 
        else{ 
            gallery.addClass("largeExp"); 
            gallery.stop(true).animate({'height':'650px'},500); 
            console.log("Expand Mode"); 
        } 

        console.log("Now would launch resize()"); 
        resize(); 
} 

$('#items').click(function() { 
    changeView(); 
});

Что же происходит, так это то, что галерея (контейнер) фактически "оживляет" такие меры, но в них нет изображений.Метод resize () запускается только со второго клика.В первый клик отлично и масштабируется как мне нужно, во второй клик изображения масштабируются до большого размера, в то время как галерея (контейнер) переходит в маленький или нормальный режим.Отсюда контейнер и изображения масштабируются в обратном порядке.Когда контейнер находится в обычном режиме, изображения расширяются и так далее.Работая так, галерея (контейнер) и изображения никогда не подходят.Мне нужно, чтобы при расширении контейнера изображения тоже расширялись.

У меня нет особого опыта в JS, и я уверен, что делаю что-то не так.Надеюсь, вы мне поможете. Я потерял много часов на этом!

Заранее большое спасибо!

1 Ответ

0 голосов
/ 10 декабря 2011

Я сейчас на своем iPad, поэтому я не могу воспроизвести код, но пока могу сказать лишь то, что это похоже на проблему с синхронизацией.Что происходит, когда вы нажимаете кнопку для масштабирования галереи, функция изменения размера вызывается практически одновременно с запуском анимации для масштабирования галереи, которая занимает 500 мс.Вам нужно либо установить время больше 500 мс для функции изменения размера, либо вызвать функцию внутри метода animate.По сути, вы должны вызывать функцию изменения размера после завершения масштабирования галереи. 

setTimeout(function() { resize(); }, 510);
...