Mouseover & Mouseout с проблемами jQuery с полем ввода - PullRequest
Новая
       33

Mouseover & Mouseout с проблемами jQuery с полем ввода

0 голосов
/ 12 декабря 2011

СТАРЫЙ КОД

У меня есть проблема, когда я перехожу через свой "#search", затем он скользит, как я должен, но проблема в том, что когда он выдвигается, он обнаруживает поле ввода для поиска, а когда мышь проходит над этим полем ввода, он начинает запускать функцию выхода из мыши, я остановил это, дав указателю if на #search ввод с пустой функцией, но когда моя мышь покидает ввод и «#search» ныряет, он не будет запускать функцию animate back.

Вот мой сценарий 

$("#search").mouseover(function(){
    $(this).animate({"left": "0px"}, 500);
});
$("#search").mouseout(function(){
    if($("#search input").mouseover()){
        return false
        }
    else {
    $(this).animate({"left": "-282px"}, 500);
    }
});

Что я делаю не так? Или у кого-нибудь есть решение? Я новичок в jQuery, поэтому только начал изучать :), и я искал Google и документацию за последние 2 дня, может быть, только я слепой, поэтому мне нужна ваша помощь:

РЕДАКТИРОВАТЬ: НОВЫЙ КОД И JS FIDDLE

Мне нужно изменить строку поиска, поэтому я просто сделал код заново, теперь вместо этого нужно щелкнуть оператор. Посмотрите здесь на JSfiddle

http://jsfiddle.net/D7s45/2/

Это jQuery, который я хотел создать:)

Ответы [ 2 ]

0 голосов
/ 13 декабря 2011

Попробуйте остановить распространение при наведении на ввод: 

$("#search input").hover(function(e) {
  e.stopPropagation();
}, function(e) {
  e.stopPropagation();
});

Ваш обычный код для #search div должен нормально функционировать.

0 голосов
/ 12 декабря 2011 
var t, isout=true;
$("#search").children("form").children().mouseover(function () {
    clearTimeout(t); isout = false;
});

$("#search").children("form").children().mouseout(function () {
    isout = true;
    tout = setTimeout(function () { $("#search").animate({ "left": "-282px" }, 500); }, 100);

});

$("#search").mouseover(function () {
    if (isout) $(this).animate({ "left": "0px" }, 500);
    clearTimeout(t); isout = false;
});

$("#search").mouseout(function () {
    isout = true; tout = setTimeout(function () { $("#search").animate({ "left": "-282px" }, 500); }, 100);
});
...