2013-08-09 3 views
0

У меня есть функция JS на следующем сайте, который работает просто отлично в Firefox, но не в Safari: http://rossbolger.com/kids/light-stories/JQuery изменение высоты не работает в Safari

Функция выскальзывает сетки миниатюр под названием # изображения-превью, когда мышь нависает над контейнером под названием # hit-area. Он работает (по крайней мере, в Firefox), сначала изменяя высоту #image_thumbs от «48px» до «auto», затем измеряют высоту с помощью высоты jQuery(). Эта высота сохраняется в переменной, а затем с помощью css() jQuery возвращается обратно в # изображение-thumbs, когда мышь закончилась.

код на сайте выглядит немного что-то вроде этого:

// Thumbnails Nav Reveal and Hide Scripts 
var thumbs_height = 1, 
thumbs = $('#image-thumbs'), 
thumbs_original_height = thumbs.css('height'); 

// Slide Up Thumbs 
(function revealThumbs() { 

    // On hover let the thumbs become their full height 
    $('#image-thumbs #hit-area').hover(function(){ // Mouse over 
     // Get the unrestricted height of the thumbs 
     thumbs.css('height', 'auto'); 
     thumbs_height = thumbs.height(); 

     // then put it back to what it was so we can animate it using CSS3 transition 
     thumbs.css('height', 'inherit'); 

     // delay 0.1s before triggering the change in height (time for the calculations to complete) 
     setTimeout(function() { thumbs.css('height', thumbs_height) }, 100); 

    }, function(){ // Mouse out 
     hideThumbs(); 
    }); 
})(); 

// Hide thumbs 
function hideThumbs(){ 
    thumbs.css('height', thumbs_original_height); 
}; 

Причины для измерения неограниченной высоты и передавая ее обратно в качестве значения пикселя, а не просто установив высоту «Авто», заключается в создании скользящего эффекта через CSS3 (т.е. переход: высота 0,5 с). Переход происходит только в том случае, если затронутый атрибут переходит от одного числового значения к другому.

Спасибо за любую ошибку, проверяющую это. Я даже не смотрел на другие браузеры.

Все самое лучшее, Laurence

+0

Может ли быть связано с объемом переменных? Просто обнаружил, что консоль в Safari рассматривает «большие пальцы» в hideThumbs() как неопределенные. –

ответ

0

Хорошо, так что я работал его ...

В яваскрипта документе (scripts.js на сайте) была функция выше страницы вызывая функцию hideThumbs(). Поэтому он не работал, потому что переменные в hideThumbs() не были объявлены в этот момент. Забавно, что он все равно должен работать в Firefox и IE9!

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

Смежные вопросы