Список <li>, исчезновение предыдущего <li>, затем исчезновение следующего <li>при наведении - PullRequest
Новая
       30

Список <li>, исчезновение предыдущего <li>, затем исчезновение следующего <li>при наведении

0 голосов
/ 04 ноября 2011

Я действительно запутался с этой функцией наведения. Поэтому, когда вы наводите указатель мыши на «список 1», он удаляет / сползает последний / предыдущий «ответ» div, который вы наводите на правый --- затем - FADE IN / SLIDE в div «Ответ» списка «список 1» , И так далее. В общем, СЛАЙДИТЕ ПОСЛЕДНЕГО div "answer", затем FADE IN / SLIDE IN нового div "answer", который вы наводите. Это имеет смысл? Действительно нужно ваше руководство!

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

<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, но не может заставить его работать :(

1 Ответ

0 голосов
/ 11 ноября 2011

Я сделал короткий пример того, что мне нужно: 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: это работает, только если вы наводите один список элементов за раз (т.е. пока аним не закончится).Вам нужно будет отсоединить и снова связать или использовать блокировку, если вам нужно быстро навести курсор на несколько элементов.

...