Блог

Меня действительно смущает эта функция наведения. Поэтому, когда вы наведете курсор мыши на «список 1», он ОПУСТИТ / СДВИНЕТ ПОСЛЕДНИЙ / ПРЕДЫДУЩИЙ раздел «Ответ», на который вы наводите курсор ВПРАВО — ЗАТЕМ — ИСЧЕЗНЕТ / СДВИНЕТСЯ В разделе «Ответ» «списка 1». И так далее. В значительной степени ВЫДВИНЬТЕ ПОСЛЕДНИЙ раздел «ответ», затем ЗАТЕМНИТЕ / ВСТАВЬТЕ новый раздел «ответ», на который вы наводите курсор. Это имеет смысл? Действительно нуждаюсь в вашем руководстве!

Итак, допустим, это список, например :

 <ul id="questions">
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
    <li>List 5</li>
</ul>
  

И пусть это ответ на каждый вопрос из приведенного выше списка :

 <div id="answer1">Answer 1</div>
<div id="answer2">Answer 2</div>
<div id="answer3">Answer 3</div>
  

Тогда это мой код jQuery :

 $("ul#questions li").hover(
    function(){$('#answer1').hide("drop", { direction: "right" }, 800);},
    // this is where i'm lost, is it li:next fadeIn something like that ?? pls help
 );
  

Видел эту страницу : http://forum.jquery.com/topic/fadeout-fadein-question но не могу заставить это работать:(

Я привел краткий пример того, что, по моему мнению, вам нужно:http://jsfiddle.net/gyhYa /

CSS:

 div {
    background: green;
    height: 50px;
    display: none;
}
  

Javascript:

 $('#questions li').hover(showAnswer, function(){});

function showAnswer() {
    var idx = $(this).text().replace(/[^0-9]/g, '');
    var answer = $('#answer'   idx);
    var visible = $('div:visible');
    if (! visible.length) {
        visible = $('div:first');
    }
    visible.fadeOut(function() {
        answer.fadeIn();
    });
}
  

PS: это работает только при наведении курсора мыши на список элементов за раз (т. Е. до завершения анимации). Вам нужно будет снова отменить привязку или использовать некоторую блокировку, если вам нужно быстро навести курсор на несколько элементов.