jQuery — вертикально плавающий DIV

#jquery #css

#jquery #css

Вопрос:

У меня есть приложение с макетом из трех столбцов, в котором элементы перемещаются взад и вперед из левого столбца в правый (и, конечно же, обратно). Между ними есть «командное меню» — вещи, которые вы можете делать на основе бла-бла-бла.

Вот в чем дело — элементы с левой стороны, с которыми вы можете действовать, расположены вертикально. Я хотел бы, чтобы меню команд следовало за движением мыши (вертикально, но в пределах своего столбца), чтобы при выборе элемента для действия меню выравнивалось по вертикали.

Я идеально (предпочтительно?) я хотел бы сделать это с помощью jQuery, но мои попытки провалились.

Вот текущая разметка:

 <table class="stuff_area">
    <tr>
        <td id="stuff_left">
            <div class="shipmentList">
                <asp:Literal ID="ltrShipments" runat="server"></asp:Literal>
            </div>
        </td>
        <td id="stuff_controls" class="stuff_area_input">
            <div id="follower">
                <input id="btnAll" type="button" value="All" /><br/>
                <input id="btnNone" type="button" value="None" /><br />
                <input id="btnStuff" type="button" value=">>" /><br />
            </div>
        </td>
        <td id="stuff_right"></td>
    </tr>
</table>
  

Я особенно заинтересован в том, чтобы сделать div с class=»follower» плавающим вверх и вниз.
Черт возьми, я не могу получить никакого движения, поэтому есть хороший шанс, что, сделав мне некоторое вертикальное перемещение (я хочу ограничить его движение вверх / вниз), вы выиграете.

Идеи?

Комментарии:

1. Что именно вы подразумеваете под «плавающим вверх и вниз»? Вы ищете эффект отскока ?

Ответ №1:

   $(function() {
    $(".stuff_area td").mouseenter( function( event ) {
      $("#follower").offset({ top: $(this).offset().top });
    } );
  });
  

Метод смещения должен делать то, что вы хотите. Я предполагаю, что ваш серверный элемент управления создает таблицу, поэтому, если нет, замените .stuff_area td более подходящим селектором.

Комментарии:

1. хорошо, это работает довольно хорошо, за исключением того, что когда я перемещаю мышь обратно в центр, чтобы фактически выбрать действие, «действия» всплывают обратно наверх. Почему это?

2. следовало уделить больше внимания. Это отлично работает, как только я изменил селектор.