Сделайте всплывающее окно div на mouseeenter (рабочий пример внутри) с просьбой оптимизации кода

Question

Я создаю новый сайт для дискотеки, на которой я работаю.

Пожалуйста, посмотрите на страницу гостей: http://www.jubileegroup.it/jubilee/guests.php

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

Я использую это в jQuery ready ():

$(".oneguest").bind("mouseenter", function () {
 //get the actual coords of the div
 var coord = $(this).position();
 //show guest's name
 $(".guestname", $(this)).show('slow');
 //I create another div with id = tempguest to make the other divs not to move!
 $(this).after("<div class='oneguest' id='tempguest'></div>");
 //check if this is the fifth element of the row (.norm = no right margin)
 if ($(this).hasClass('norm')) {
  $("#tempguest").addClass('norm');
 }
 //I convert the div in an absolute positioned div and place it perfectly centered with his older position
 $(this).css("width", "246px");
 $(this).css("height", "300px");
 $(this).css("border", "5px solid #ddd");
 $(this).css("top", (coord.top - 66) + "px");
 $(this).css("left", (coord.left - 39) + "px");
 $(this).css("position", "absolute");
 $(this).css("z-index", "100");
});
//on mouseleave I destroy the "placeholder" div (id=tempguest) and reconvert the div to non-absolute.
$(".oneguest").bind("mouseleave", function () {
 $("#tempguest").remove();
 $(".guestname", $(this)).hide('fast');
 $(this).css("width", "176px");
 $(this).css("height", "176px");
 $(this).css("border", "1px solid #ddd");
 $(this).css("top", "");
 $(this).css("left", "");
 $(this).css("position", "inherit");
 $(this).css("z-index", "1");
});

Как я уже говорил, эффект работает, но я думаю, что мое решение совсем не красиво! Что ты думаешь?

Answer 1

Основная очистка заключается в том, что .css() может взять объект и .hover() в качестве ярлыка для mouseenter и mouseleave, например:

$(".oneguest").hover(function () {
    var coord = $(this).position();
    $(this).find(".guestname").show('slow');
    $(this).after("<div class='oneguest' id='tempguest'></div>");

    if ($(this).hasClass('norm')) 
       $("#tempguest").addClass('norm');

    $(this).css({ width: "246px", 
                  height: "300px", 
                  border: "5px solid #ddd", 
                  top:  (coord.top - 66) + "px", 
                  left: (coord.left - 39) + "px", 
                  position: "absolute", 
                  z-index: "100" });
}, function () {
    $("#tempguest").remove();
    $(this).find(".guestname").hide('fast');    
    $(this).css({ width: "176px", 
                  height: "176px", 
                  border: "1px solid #ddd", 
                  top:  "", 
                  left: "", 
                  position: "inherit", 
                  z-index: "1" });
});

Здесь мало что можно сделать с точки зрения оптимизации, но она немного красивее.