jquery / css изменяет css на jquery-шоу в IE

Question

Я сделал функцию наведения с помощью jquery.Все отлично работает в FireFox и Chrome, проблема в IE.Я меняю css top / left и использую jquery.show, чтобы сделать div видимым.Хотя в IE при первом наведении курсора он отображается не в той позиции.Во второй раз он показывает просто отлично ..

var x = (e.pageX - this.offsetLeft) - $(this).next("div").width();
var y = e.pageY - this.offsetTop;



$(this).next("div").css({ display: 'block', 'position': 'fixed', zIndex: 2, left: x, top: y });

$(this).next("div").show("slow");

Опять же, он отлично работает в Chrome и Firefox, но IE .. (я только что протестировал IE9)

это CSS, который есть у divпо умолчанию, чтобы скрыть это:

display:none;
position:fixed;
z-index:2;   

Answer 1

Вы столкнулись с этой проблемой, потому что div не полностью загружен при вычислении x. jQuery не знает, какой будет ширина div, и поэтому возвращает 0. В следующий раз, конечно, div загрузится, и jQuery получит правильную ширину.

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

http://jsfiddle.net/gilly3/gup8u/22/

$('.linkin').hover(function(e) {
    var x = document.documentElement.offsetWidth - e.pageX;
    var y = e.pageY;

    $(this).next("div").css({
        right: x,
        top: y
    }).stop(true, true).show("slow");
},
function() {
    $(this).next().addClass('tooltip').stop(true, true).hide("slow");
});