jquery顯示/隱藏和不透明

我將有3個100x100像素div，向左漂移。

<div id="container"> 
    <div id="1">did you know?</div> 
    <div id="2">help</div> 
    <div id="3">other</div> 
</div>

當您將鼠標懸停在這三個div上時，另一個div將通過show（）顯示;或者slideDown（）;以及該主題的特定內容。

問題是，有沒有辦法讓它懸停在任何div 1,2,3上，其他兩個會降低不透明度，使它們看起來透明？

那部分我無法弄清楚...

在此先感謝。

來源

2010-06-29 tony noriega

首先這裏，確保這些ID是有效的，例如不以數字開頭（除非您使用的是HTML5文檔類型）。

然後你可以使用.animate()和.hover()，像這樣：

$("#container > div").css({opacity: 0.2 }).hover(function() { 
    $(this).stop().animate({ opacity: 1 }); 
}, function() { 
    $(this).stop().animate({ opacity: 0.2 }); 
});

You can try a demo here，初始.css()呼叫，使他們在頁面加載的所有非徘徊十歲上下。

更完整的演示，展示內容還有，try this :)

下面是一個示例標記：

<div id="container"> 
    <div>did you know?</div> 
    <div>help</div> 
    <div>other</div> 
</div> 

<div id="content"> 
    <div>Did You Know? Content</div> 
    <div>Help Content</div> 
    <div>Some other stuff</div> 
</div>

和腳本：

$("#container > div").css({opacity: 0.2 }).hover(function() { 
    $(this).stop().animate({ opacity: 1 }); 
    $("#content div").eq($(this).index()).stop(true, true).slideDown(); 
}, function() { 
    $(this).stop().animate({ opacity: 0.2 }); 
    $("#content div").eq($(this).index()).stop(true, true).slideUp(); 
});

你可以當然要調整它，讓最後一個懸空，等等......這只是一個想法，就像y一樣ou descibe。

來源

2010-06-29 22:12:51

我想你需要在'slideDown（）'之前''.stop（true，true）'並且在'slideUp（）'之前避免動畫隊列堆積 – 2010-06-29 22:27:50

@Russ--好的調用，我沒有看對於排隊這些，總是一個很好的補充......這一切都取決於他的後續，這聽起來像他已經有某種影響，我不確定這個問題，如果這甚至是有用的，希望它會對某人:) – 2010-06-29 22:36:38

怎麼樣這樣的：

div.onmouseover = function() { 
    for(i = 0, c = this.parentNode.childNodes, e = c.length; i < e; i++) { 
     if (c[i] !== this) { 
      $(c[i]).css('opacity', '...'); 
     } 
    } 
}

來源

2010-06-29 22:10:46 Tom

jquery顯示/隱藏和不透明

回答

相關問題