Малка Jquery анимирана функция - jquery, функция, hover, jquery-animate

Използвам тази Jquery анимирана функция:

$(document).ready(function() {
$("#trigger").hover(function() {
$("#mask").animate({
width: "toggle", left: "+=0"}, 250, "easeout");
});
});

Когато потребителят премества над зоната на задействане на тригер (<span id="trigger">), маската (<div id="mask">) слайдове наляво. След това маската се връща в позиция, когато потребителят премести мишката си от зоната на задействане.

Тя работи перфектно.

Въпреки това, ако потребителят "мишка" се намира надплощта на обхвата на тригера при зареждане на страницата, маската се плъзга в обратната посока, т.е. Когато той / тя се отдалечи от зоната на спусъка, маската се плъзга наляво.

Някой знае ли начин за предотвратяване на това?

Отговори:

Проблемът е, че използвате "превключвате" и един манипулатор. Така че превключвателят се появява при влизане на мишката и излизане от мишката. Ако започнете от тригера div, излизането го превключва за първи път.

За да поправите това, използвайте два манипулатора:

$(document).ready(function() {
$("#trigger").hover(function() {
$("#mask").animate({
width: "0px",
}, 250, "easeout");
},function() {
$("#mask").animate({
width: "100px",
}, 250, "easeout");
});
});

Разбира се, трябва да имате ширината на #mask, Ако е променлива, все още можете да заобиколите това.