раскрывающийся список 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 (), а не slideDown?

Answer 1

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

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

и

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

Answer 2

Вы все еще можете использовать slideDown, 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");
    });
});