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

首先，没有个别项目的课程。您可以使用id单独设置它们的样式，并且只为具有相同类的所有对象设置一个悬停功能（而不是复制和粘贴四次）。

第二关，这是你应该拥有的基本结构：

<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”元素作为按钮的子元素，但它们需要在没有唯一ID的情况下可访问（即下一个元素或子元素）。

这使得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");
    });
});