Простая jQuery fadeIn fadeOut animation - Как показать/скрыть DIVS?

Question

СЦЕНАРИЙ: У вас есть 2 ссылки внутри списка ul, li: MY INFO и LOG IN Одна ссылка должна содержать поле (с анимацией fadeIn) с формой внутри, когда используется HOVER по ссылке. Другая ссылка показывает кнопку внутри коробки (с анимацией fadeIn), когда вы HOVER по ссылке.

Форма должна исчезатьOut, когда пользователь MOUSEOUT ссылки «ВХОД» или мышь формы. Коробка с кнопкой, должна fadeOut, когда пользователь MOUSEOUT ссылки «MY INFO» ИЛИ вытащил окно.

ПРОБЛЕМА (такая же для обоих): Форма исчезает, когда MOUSEOUT link MY INFO. Кнопка внутри div исчезает, когда ссылка MOUSEOUT LOG IN.

Примечание: 1/Форма должна быть видна при наведении курсора мыши на ссылку или на ФОРМА 2/коробка с кнопкой должна быть видна при наведении курсора мыши на ссылку или на поле с кнопкой

REFERENCE : проверить www.conforama.fr на самой верхней части экрана, ссылка «Compte» со значком, у него есть класс: «with-hover-menu». Когда вы наведете курсор мыши, появится форма. Когда вы вытаскиваете ссылку или форму, форма исчезает. Мне нужно то же самое, но с fadeIn.

Прямо сейчас вы можете посмотреть код ниже в этом jsfiddle: http://jsfiddle.net/75HYL/19/, но он вообще не работает. Я не знаю, как этого добиться. Хотелось бы понять и узнать ... !!

<ul class="links"> 
    <li class="classA"><a><span>My info</span></a></li> 
    <li class="classB"><a><span>Log in</span></a></li> 
</ul> 

<div id="userInfo">USER MUST BE ABLE TO CLICK THE BUTTON BELOW, SO THIS BOX MUST STAY VISIBLE<br/> 
    <input type ="button" value="OKAY"/> 
    <div id="login" > 
     <div class="form"> 
      <form> 
       <input type="textfield" value="enter your email"></input> 
       <input type="checkbox"><option>remember me? </option><input> 
       <input type="button" value="Click me"/> 
      </form> 
     </div> 
    </div> 
</div> 
<style> 
    .links li { display:inline-block;cursor:pointer; } 
    .links li { padding:0 4px 0 1px; } 
    .links li.classA {width:147px; height:77px;background:url(../images/sprites01.png) no-repeat -226px 0px;} 
    .links li.classB {width:147px; height:77px;background:url(../images/sprites01.png) no-repeat -226px 0px;} 
    .links li.classA span {} 
    .links li.classB span {} 
    .links li.classA:hover {background:url(../images/sprites01.png) no-repeat -226px -80px;} 
    .links li.classB:hover {background:url(../images/sprites01.png) no-repeat -226px -80px;} 
    .links li.classA a {color:#fff;text-transform:uppercase;background:#00aaff;padding:5px 5px 0 20px;margin:5px 0 0;font-size:1em;height:50px;display:block;} 
    .links li.classB a {color:#00aaff;text-transform:uppercase;background:orange;padding:5px 5px 0 20px;margin:5px 0 0;font-size:1em;height:50px;display:block;} 
    #login {display:none;width:250px;height:250px; background:#bbb;color:#000;border:1px solid red;} 
    #userInfo{display:none;width:250px;height:250px; background:#bbb;color:#000;border:1px solid red;} 
</style> 

<script> 
    $("li.classA").hover(function() { 
     $("#userInfo").fadeIn('fast').css('display', 'block'); 
    }); 
    $("#login, .classA").mouseleave(function() { 
     $("#userInfo").fadeOut('fast').css('display', 'none'); 
    }); 

    $("li.classB").hover(function() { 
     $("#login").fadeIn('fast').css('display', 'block'); 
    }); 
    $("#login, .classA").mouseleave(function() { 
     $("#login").fadeOut('fast').css('display', 'none'); 
    }); 
</script> 

Answer 1

Это то, что вы хотите?

http://jsfiddle.net/WcUFe/3/

Я только изменил JS, чтобы легче увидеть различия. Для более легкой жизни cssand/или html следует изменить, и весь код можно поместить в отдельный плагин, который будет управлять всем шоу.

В основном я использую таймер, позволяющий пользователю ~ 100 мс перемещать мышь от элемента LI к отображаемому контейнеру ....все остальное круто, чтобы поддерживать состояние и убедиться, что у нас никогда не будет 2 контейнера, видимых в любой момент.

Answer 2

Немного похоже на this? Убрал несколько синтаксических ошибок и немного изменил логику

Answer 3

Ну, ваша проблема в том, что мышь в настоящее время ДОЛЖНА оставить ваши ссылки, чтобы добраться до ящиков. Поэтому ящики ДОЛЖНЫ исчезнуть для того, чтобы функциональность работала так, как вы заявили выше.

Несколько соображений приходят на ум (я не очень хорош с jQuery, поэтому могут быть лучшие варианты); 1 - добавить bool и некоторую логику, чтобы сказать, открылся ли ящик, а затем только прослушивать события mouseout на поле (а не ссылку и поле). И еще одно - это отбросить события, чтобы немного времени задержки, прежде чем вы прослушали событие mouseout ссылки.

• выглядит как @AbstractChaos очистил это сейчас, так как я подозревал, что есть лучший вариант для моих предложений!

Надеюсь, это поможет.

Answer 4

или

$("li.classA").hover(function() { 
    $("#login").css('display', 'none'); 
    $("#userInfo").fadeIn('fast'); 
}); 
$("#userInfo").mouseleave(function() { 
    $("#userInfo").fadeOut('fast'); 
}); 


$("li.classB").hover(function() { 
    $("#userInfo").css('display', 'none'); 
    $("#login").fadeIn('fast'); 
}); 
$("#login").mouseleave(function() { 
    $("#login").fadeOut('fast'); 
}); 

Answer 5

Попробуйте это: http://jsfiddle.net/QR49h/

я переехал в дивы быть скрыты/показаны внутри <li> элементов:

<ul class="links"> 
    <li class="classA"><a><span>My info</span></a> 
     <div id="userInfo">USER MUST BE ABLE TO CLICK THE BUTTON BELOW, SO THIS BOX MUST STAY VISIBLE 
      <br/> 
      <input type="button" value="OKAY" /> 
     </div> 
    </li> 
    <li class="classB"><a><span>Log in</span></a> 
     <div id="login"> 
      <div class="form"> 
       <form> 
        <input type="textfield" value="enter your email" /> 
        <input type="checkbox" /> 
        <option>remember me?</option> 
         <input /> 
        <input type="button" value="Click me" /> 
       </form> 
      </div> 
     </div> 
    </li> 
</ul> 

Я также исправлен баг в JS (CLASSA против ClassB) и вертел css немного, так что второй элемент <li> может сохранить свое положение, когда первое будет расширено. Ох и исправил некоторые вопросы закрытия элементов в форме div.