jQuery的下拉菜單 - CSS問題

嘿，如果你去：http://catonthecouchproductions.com/fish/，並且下拉下這些圖像是假設被隱藏，然後出現在盤旋，我有這個至今：jQuery的下拉菜單 - CSS問題

$(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？

來源

2009-03-02 Coughlin

代替.slideDown()和.slideUp()嘗試分別用：

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

and

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

來源

2009-03-05 11:54:35 tanathos

試試這個：

$(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-02 14:44:15 Bigballs

你仍然可以使用了slideDown，效果基本show，這是非常有用的。我認爲你的問題是.hover，使用.mouseover嘗試，然後用鼠標作爲回調。因爲現在看起來事件停止滑塊沒有正確調用，因爲它一次又一次地循環。另外，我沒有想到會發生什麼情況，我認爲你混淆了一些元素或其他東西。你也可以嘗試在應該隱藏或顯示的項目上添加一個類，然後使用.hasClass（）;當你想要檢查他們是否有某個班級時，這樣你就可以確定你是否應該向上或向下滑動它。

來源

2009-03-02 14:44:50

要開始每個項目都假設開始隱藏，但現在我剛剛離開他們，因爲正在顯示。翻轉時，我希望它們滑下並顯示爲下拉菜單，然後在展開時將它們恢復到其原始狀態。 – Coughlin 2009-03-02 20:40:54

首先，沒有針對單個項目的課程。您可以使用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-03 03:44:26 qpingu

jQuery的下拉菜單 - CSS問題

回答

相關問題