JQuery的：滑動的圖像倒在鼠標懸停

撥弄我的工作：http://jsfiddle.net/Hu4bg/1/JQuery的：滑動的圖像倒在鼠標懸停

我試圖創建一個垂直菜單，當你的鼠標在鏈接上，我希望有一個像（一個div會更好因爲它有一個內容）向下滑動，它永遠不會再次滑動，而當另一個鏈接懸停時，它會滑落到最後一張圖片上，並滑落。

我想我應該改變z-index值，但我不知道如何通過JQuery來控制這個東西。你能在我的小提琴上給我一個快速提示嗎？

$(document).ready(function() { 
    $("#leftmenu a").hover(function() { 
     $("#img1").slideDown(250); 
    }); 

    $("#leftmenu a").mouseleave(function() { 
     $("#img1").slideUp(250); 
    }); 
});

來源

2013-02-27 ofer dofer

http://jsfiddle.net/arjuncc/Hu4bg/2/ – arjuncc 2013-02-27 11:44:50

您的意思是？ http://jsfiddle.net/Hu4bg/3/

我都凝結着碼成一個事件，並改變了它的工作原理（相匹配的多圖像框ID來鏈接類）的方式：

$("#leftmenu a").hover(function() { 
    $("[id^=img]:not([id=" + $(this).attr("class") + "])").slideUp(250); 
    $("#" + $(this).attr("class")).slideDown(250); 
});

我還添加了2個img標籤，與在a標籤匹配類，編號：

<div id="img1">Image here</div> 
<div id="img2">Image here</div> 
<div id="img3">Image here</div> 

<ul> 
    <li> <a class="img1" href="#">Image 1</a></li> 
    <li> <a class="img2" href="#">Image 2</a></li> 
    <li> <a class="img3" href="#">Image 3</a></li> 
</ul>

來源

2013-02-27 12:00:59 mattytommo

那種。我不喜歡它滑動，它只會滑落，如果你將鼠標懸停在另一個鏈接上，另一個圖像（或div）也會滑落，但排列應該改變，它會帶來圖像，否則一個具有較高z-索引值的將永遠在最前面。（我假設z-index與此有關） – 2013-02-27 12:45:46

.hover需要兩個參數。一個用於鼠標進入，另一個用於鼠標離開。

$("#leftmenu a").hover(function() { 
    $("#img1").slideDown(250); 
}, function() { 
    $("#img1").slideUp(250); 
});

來源

2013-02-27 11:43:49

你實際上可以用純粹的css通過使用CSS Animation來做到這一點。

這是這個的LIVE DEMO。

來源

2013-02-27 11:58:29 Danield

是的，但這個東西是很新，人們仍然堅守老頑固browswers :) – 2013-02-27 12:53:12

JQuery的：滑動的圖像倒在鼠標懸停

回答

相關問題