jqueryUI hover (слайд) повторяющийся снова и снова

Question

Я раньше задал вопрос о том, чтобы некоторые divs стали видимыми и скользили вверх, как листы бумаги, и у меня были проблемы с тем, чтобы код JQuery работал последовательно (или вообще) ,

Теперь я преодолел эти проблемы и перешел на этап настройки.

У меня есть серия div, которые выглядят как разделители файловых папок. Когда вы зависаете над каждым отдельным div, я хочу, чтобы отдельный div скользил как лист бумаги. Я использовал функцию «слайд» в JQueryUI для достижения этого эффекта. В моей первой версии у меня был только один слайд, и я обнаружил, что даже после того, как я переместил курсор, новый div остался видимым. Затем я добавил повтор функции «слайд», используя «скрыть» (сначала «показать»), чтобы лист снова исчез. Вот мой код:

$("#artwork").hover(function() { 
    $("#artwork-sheet").show("slide", { direction: "down" }, 1000); 
    $("#artwork-sheet").hide("slide", { direction: "down" }, 1000); 
}); 
$("#websites").hover(function() { 
    $("#websites-sheet").show("slide", { direction: "down" }, 1000); 
    $("#websites-sheet").hide("slide", { direction: "down" }, 1000); 
}); 
$("#threedmodels").hover(function() { 
    $("#threedmodels-sheet").show("slide", { direction: "down" }, 1000); 
    $("#threedmodels-sheet").hide("slide", { direction: "down" }, 1000); 
}); 
$("#games").hover(function() { 
    $("#games-sheet").show("slide", { direction: "down" }, 1000); 
    $("#games-sheet").hide("slide", { direction: "down" }, 1000); 
}); 
$("#movies").hover(function() { 
    $("#movies-sheet").show("slide", { direction: "down" }, 1000); 
    $("#movies-sheet").hide("slide", { direction: "down" }, 1000); 
}); 
$("#flash").hover(function() { 
    $("#flash-sheet").show("slide", { direction: "down" }, 1000); 
    $("#flash-sheet").hide("slide", { direction: "down" }, 1000); 
}); 
$("#info").hover(function() { 
    $("#info-sheet").show("slide", { direction: "down" }, 1000); 
    $("#info-sheet").hide("slide", { direction: "down" }, 1000); 
}); 

Исходное поведение верное; однако лист кажется случайным образом появляющимся и исчезающим много раз, независимо от того, находится ли мой курсор над div или переместился (после активации).

Мое предположение заключается в том, что существует лучший способ заставить div скрыть себя ПОСЛЕ события наведения. Может ли кто-нибудь помочь или указать в правильном направлении?

Вот оригинальный вопрос, если вы хотите увидеть больше: jquery slideUp/Down functions only work in firefox with firebug; also, hover function doesn't seem to work

Спасибо,

Алан

---

Там просто не хватает места внутри «комментарий» блока к дать полезный ответ.

(В ответ на # 1) Извините, это не сработало для меня. slideDown - это то, чего я не хочу - я хочу, чтобы элемент выглядел непокрытым снизу вверх, в то время как slideDown заставляет его отображаться сверху вниз. Кроме того, стенография не работала вообще. Ничего не изменилось во время состояния зависания. Это был тот же тип проблемы, который я имел, как указано в моем первом опубликованном Вопросе.

Затем я попробовал просто использовать «правильный» синтаксис с запятыми, и это похоже на работу (phew, нашел опечатку до того, как я завершил это сообщение/комментарий).

Любые мысли о том, почему сокращенная версия не работает?

Я только что разрезал и вложил в свой документ и прокомментировал оригинал, но ответ был нулевым.

Спасибо за помощь, всем.

Answer 1

Прежде всего, не нужно постоянно повторять это снова и снова, упростите все это в одну переменную выбора jQuery, а затем добавьте в нее '-sheet'. Затем у вас есть шоу и скрывается в той же функции, используйте синтаксис соответствия .hover, используя две функции, разделенные запятой. Также используйте .slideDown(), поскольку это намного более чистый jQuery. :)

$(function(){ 
    var $hoverbuttons = $('#artwork, #websites, #threedmodels, #games, #movies, #flash, #info') 
    $hoverbuttons.hover(function(){ 
     $(this + '-sheet').slideDown(1000); 
    },function(){ 
     $(this + '-sheet').slideDown(1000); 
    }); 
}); 

Answer 2

посмотреть синтаксис парения здесь http://api.jquery.com/hover/ вам нужно добавить запятую (,) между двумя действиями, и это лучше, чтобы написать их внутри функции, как указано в официальной документации