Раскрывающийся список jQuery – проблемы с CSS

Question

Эй, если ты пойдешь: http://catonthecouchproductions.com/fish/ и эти изображения в раскрывающемся списке должны быть скрыты, а затем появляются при наведении курсора мыши, у меня пока есть это:

$(document).ready(function() {
    $('.btn-fishing-trip').hover(function() {
        $('.fishing-trip').slideDown("slow");
    }, function() {
        $('.fishing-trip').slideUp("slow");
    });
    $('.btn-combo').hover(function() {
        $('.combo').slideDown("slow");
    }, function() {
        $('.combo').slideUp("slow");
    });
});

Но он ведет себя странно.Любые предложения о том, что я могу сделать?Я думаю, что, поскольку один раз поднимается вверх, другие слайды занимают его место.Должен ли я использовать animate(), а не слайдDown?

Answer 1

Вместо .slideDown() и .slideUp() попробуйте использовать соответственно:

$(yourElementHere).stop().animate({ top: "20px", opacity: "1" }, 500, "swing");

и

$(yourElementHere).stop().animate({ top: "-180px", opacity: "0" }, 500, "swing");

Answer 2

Вы по-прежнему можете использовать слайды Down и SlideUp, что действительно полезно.Я думаю, что ваша проблема связана с .hover, попробуйте использовать .mouseover, а затем mouseout в качестве обратного вызова.Потому что теперь кажется, что событие остановки ползунка вызывается неправильно, поскольку оно повторяется снова и снова.Кроме того, я не совсем понимаю, что должно произойти, думаю, вы перепутали какие-то элементы или что-то в этом роде.Вы также можете попробовать добавить класс к элементам, которые должны быть скрыты или показаны, а затем использовать .hasClass();когда вы хотите проверить, есть ли у них определенный класс или нет, таким образом вы можете определить, следует ли вам сдвинуть его вверх или вниз.

Answer 3

Во-первых, не делайте классов для отдельных предметов.Вы можете индивидуально стилизовать их, используя идентификаторы, и иметь только одну функцию наведения для всех объектов одного и того же класса (вместо копирования и вставки четыре раза).

Во-вторых, вот базовая структура, которая у вас должна быть:

<div class="button" id="btn1">
  <div class="info"><img src="info1"></img></div>
</div>
<div class="button" id="btn2">
  <div class="info"><img src="info2"></img></div>
</div>
...

Вам не обязательно иметь элементы «.info» в качестве дочерних элементов кнопок, но они должны быть доступны без уникального идентификатора (т. е. следующего элемента или дочернего элемента).

Это упрощает использование JavaScript:

$(".button").hover(function() {
  $(this).find(".info").slideDown();
}, function() {
  $(this).find(".info").slideUp();
});

Или вы можете изменить его так, чтобы он работал лучше:

$(".button").hover(function() {
  $(".info").not(".info", $(this)).slideUp(); // Not sure if valid JQ
  $(this).find(".info").slideDown();
});

Answer 4

попробуй это:

$(document).ready(function() {
    $('.btn-fishing-trip').hover(function() {
        $('.fishing-trip').slideDown("slow");
        $('.combo').slideUp("slow");
    });    
    $('.btn-combo').hover(function() {
        $('.combo').slideDown("slow");
        $('.fishing-trip').slideUp("slow");
    });
});