Как сохранить фокусировку, когда мышь входит в дочерний узел

Question

Итак, у меня есть эта страница здесь: http://www.eminentmedia.com/development/powercity/

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

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

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

Весь мой код находится непосредственно в источнике этой страницы, если вы хотите просмотреть исходный код.

Заранее спасибо за помощь!

Answer 1

Да, вы должны предварительно загрузить изображения. К счастью, это просто:

var images_to_preload = ['myimage.jpg', 'myimage2.jpg', ...];
$.each(images_to_preload, function(i) {
    $('<img/>').attr({src: images_to_preload[i]});
});

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

<div id="service" onmouseover="javascript:mouseEnter(this.id);" onmouseout="javascript:mouseLeave(this.id);">

Убери это из головы. Сейчас. Навсегда. Всегда. Встроенные события javascript не являются правильными, особенно если в вашем распоряжении есть библиотека, такая как jQuery. Правильный способ сделать то, что вы хотите, это:

$(function() {
    $('div.box').hover(function() {
        $(this).addClass('active');
        $(this).find('div.slideup').slideDown('slow');
    }, function() {
        $(this).removeClass('active');
        $(this).find('div.slideup').slideUp('slow');
    });
});

(Вы должны дать всем элементам #industrial, #sustainable и т. Д. Класс 'box' для работы вышеупомянутого)

Эти изменения также исправят вашу проблему со скольжением.

Answer 2

1) Вы должны использовать события jquery для управления мышью. Присвойте каждому div свой класс, чтобы указать, что это контейнер категорий, и используйте функцию hover для выполнения действия mouseover / mouseout, которое вы выполняете.

HTML

<div id="industrial" class="category"></div>

Javascript

$(".category").hover(
  function () {
    $(this).find('.container').show();
  }, 
  function () {
    $(this).find('.container').hide();
  }
);

Я упростил код, чтобы просто показывать и скрывать, вам нужно будет использовать дополнительный код для перемещения вверх и вниз.

2) Да, вам нужно предварительно загрузить ваши изображения. Другим вариантом будет «спрайт» изображения. Это предполагает объединение как черно-белой, так и цветной версий каждого изображения в одно изображение. Затем вы устанавливаете его как фоновое изображение div и просто используете CSS для настройки смещения положения фона. По сути, мгновенный переход от черно-белых к цветным изображениям при переключении. Этот метод гарантирует, что оба изображения полностью загружены.

Answer 3

Я вижу, что ваши изображения (те, которые меняются) установлены на заднем плане div Вот скрипт jquery, который предварительно загружает каждое изображение, найденное в файле CSS. У меня была такая же проблема в прошлом, и этот скрипт решает ее. Он также очень прост в использовании:

http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

Я посмотрю на вашу другую проблему ...