How to keep div focus when mouse enters node child

Question

So, I have this page here: http://www.eminentmedia.com/development/powercity/

As you can see, when the mouse is above the images, the div moves up and down to show additional information. Unfortunately, I have two problems that I cannot understand, and I searched, but did not find the correct answer through Google and hoped that someone could point me towards the tutorial.

The first problem is that when you point the image at the image, it changes to color (loads a new image), but there is a slight delay when the image is loaded for the first time, so the user sees white. Should I preload images or something else to fix this?

My second problem is that when you hover the mouse over the “area of ​​additional content”, it goes crazy and starts going up and down heaps of times. I just don’t know what might cause this, but I hope one of you will be!

All my code is directly in the source of this page if you want to view the source.

Thanks in advance for your help!

Answer 1

Yes, you must preload the images. Fortunately, this is simple:

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

, (, ) div. jquery script, , css. , script . :

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

...

Answer 3

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) Yes, you need to preload the images. Another option would be to "sprite" the images. This should combine both black and white and color versions of each image with one image. Then you set it as the background image of the div and just use CSS to adjust the offset of the background position. Essentially instantly moving from black and white to color images when capsizing. This method ensures that both images are fully loaded.