Div не остается видимым при наведении

Я постараюсь быть максимально ясным. Пожалуйста, имейте в виду, что я новичок в JQuery!

Я использую этот код для создания 1 мегаменю JQuery с помощью div.

Я хотел бы, чтобы меню запускалось при наведении, а затем исчезало с помощью .dropdowntrigger. Затем я хотел бы, чтобы меню исчезало при нажатии мыши из #menuwrap.

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

Вот код:

$(function() {
  $('.dropdowntrigger').hover(function() { 
    $('#menuwrap').fadeIn(500);
  }, function() { 
    $('#menuwrap').fadeOut(500); 
  });
});

Любая помощь в этом будет высоко оценена и не стесняйтесь, дайте мне знать, если вам потребуется более подробная информация.

Спасибо,

Даниэль


jquery hover jquery-hover
person DannyBoy    schedule 09.01.2014    source источник
comment
увеличить время затухания? (в миллисекундах)   -  person Venkata Krishna    schedule 09.01.2014
comment
Опубликуйте упрощенную версию вашего html, пожалуйста, если #menuwrap не находится внутри dropdowntrigger, то произойдет то, что вы описали   -  person Huangism    schedule 09.01.2014
comment
ваша функция fadeOut должна быть привязана к функции .mouseleave   -  person timo    schedule 09.01.2014
comment
Без дополнительных html и css, я могу узнать, что это не какой-то другой css мешает?   -  person Milche Patern    schedule 09.01.2014

Ответы (3)


arrow_upward
0
arrow_downward

Не могли бы вы попробовать это... Я поменял местами ваши fadeIn(500) и fadeout(500)

См. эту ССЫЛКУ

$(document).ready(function() {
    $('.dropdowntrigger').hover(function() { 
    $('#menuwrap').fadeOut(500);
}, function() { 
$('#menuwrap').fadeIn(500); 
});
});
person Vishal Patel    schedule 09.01.2014

arrow_upward
0
arrow_downward

если я правильно думаю, то попробуйте это:

$('.dropdowntrigger').mouseover(function() {
$('#menuwrap').fadeIn(500);
});
$('.dropdowntrigger').mouseleave(function() {
$('#menuwrap').fadeout(500);
});
$('#menuwrap').mouseover(function() {
$('#menuwrap').fadeIn();
});
$('#menuwrap').mouseleave(function() {
$('#menuwrap').fadeout();
});
person Kalpesh Rajai    schedule 09.01.2014

arrow_upward
-1
arrow_downward

Это потому, что вы присоединяетесь к функциям как функция ответа, и как только первая функция завершится, вторая продолжится.

$(function() {
  $('.dropdowntrigger').hover(function() { 
    $('#menuwrap').fadeIn(500);
  }, function() { 
    $('#menuwrap').fadeOut(500); 
  });
});

Это будет выполнено, когда завершится первая (fadeIn()) функция. Поэтому вам нужно установить две отдельные функции здесь.

Попробуйте изменить их

$('.dropdowntrigger').mouseover(function() {
  $('#menuwrap').fadeIn(500);
});
$('.dropdowntrigger').mouseleave(function() {
  $('#menuwrap').fadeout(500);
});

Таким образом, элемент исчезнет только тогда, когда вы покинете элемент мышью!

Вы можете использовать функцию setTimeOut как:

$('.dropdowntrigger').mouseleave(function () {
  setTimeOut(fadeOutElement, 10000);
}

А теперь функция как:

function fadeOutElement() {
  $('#menuwrap').fadeOut(); 
}

Обратите внимание, что setTimeOut — это функция, которая принимает два аргумента.

  1. Имя функции, которая должна быть выполнена!

  2. Время в миллисекундах!

setTimeOut(fadeOutElement, 10000) будет искать функцию с именем fadeOutElement и выполнится через 10 секунд (10000 миллисекунд — это 10 секунд).

person Afzaal Ahmad Zeeshan    schedule 09.01.2014
comment
Спасибо за все ваши комментарии. Я думаю, что я пытаюсь добиться задержки перед исчезновением, и #menuwrap должен оставаться видимым при наведении курсора. - person DannyBoy; 09.01.2014
comment
Когда вы используете код, который я предоставил (второй), элемент останется видимым при наведении курсора! и какая задержка? Затем вы можете использовать setTimeOut(), и в этой функции добавить время, которое вам нужно ждать.. - person Afzaal Ahmad Zeeshan; 09.01.2014
comment
Эй, Афзаал, я попробовал этот код, но все равно не повезло. пожалуйста, не могли бы вы сообщить мне, где я ошибаюсь. $(function() { $('.dropdowntrigger').mouseover(function() { $('#menuwrap').fadeIn(500); }); $('.dropdowntrigger').mouseleave(function() { $('#menuwrap').setTimeOut(1000).fadeout(500); }); }); - person DannyBoy; 09.01.2014
comment
#menuwrap не исчезает и остается видимым. - person DannyBoy; 09.01.2014
comment
мне нужно, чтобы теперь он исчезал при уходе мыши. - person DannyBoy; 09.01.2014
comment
Теперь вы можете увидеть ответ @user2965596 :) - person Afzaal Ahmad Zeeshan; 09.01.2014
comment
Это дает мне синтаксическую ошибку. Есть ли в этой строке опечатка - функция fadeOutElement. Я новичок в jquery, поэтому не могу понять прямо сейчас. Спасибо за ваше время на это. - person DannyBoy; 10.01.2014
comment
Это то, что у меня есть сейчас - $(function() { $('.dropdowntrigger').mouseover(function() { $('#menuwrap').fadeIn(500); }); $('.dropdowntrigger') .mouseleave(function() { $('#menuwrap').fadeout(500); }); $('.dropdowntrigger').mouseleave(function () { setTimeOut(fadeOutElement, 10000); } function fadeOutElement() { $('#menuwrap').fadeOut(); } }); - person DannyBoy; 10.01.2014