jquery/css изменение css на jquery show в IE

Question

Я создал функцию hover с 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

вы работаете с этой проблемой, потому что ДИВЫ не полностью загружены при расчете 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"); 
});