2

嘿，如果你去：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 吗？

4

4 回答 4

0

试试这个：

$(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");
    });
});
于 2009-03-02T14:44:15.230 回答
0

还是可以用slideDown、slideUp，真的好用。我认为您的问题出在 .hover 上，请尝试使用 .mouseover，然后将 mouseout 作为回调。因为现在似乎没有正确调用停止滑块的事件，因为它一次又一次地循环。另外，我不明白应该发生的事情，我认为你混淆了一些元素或其他东西。您可以尝试在应该隐藏或显示的项目上添加一个类，然后使用 .hasClass(); 当您想检查他们是否有某个班级时，您可以确定是否应该向上或向下滑动它。

于 2009-03-02T14:44:50.517 回答
0

首先，没有针对单个项目的课程。您可以使用 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();
});
于 2009-03-03T03:44:26.603 回答
0

而不是.slideDown()并.slideUp()尝试分别使用：

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

和

$(yourElementHere).stop().animate({ top: "-180px", opacity: "0" }, 500, "swing");
于 2009-03-05T11:54:35.067 回答