jquery mouseenter and fadeTo

我想要一個div在鼠標進入時消失爲不透明度1，當它離開時消除0.5。這是我的代碼：jquery mouseenter and fadeTo

 <script> 
    $(document).ready(function(){ 
     $("#header").mouseenter(function(){ 
     $("#header").fadeTo('fast', 1); 
     }); 
     $("#header").mouseleave(function(){ 
      $("#header").fadeTo('fast', 0.5); 
    }); 

    } 


    </script>

HTML：

<body> 

     <div id="header"> 
      <h1>Hello!</h1> 
      <p>blah blah...</p> 
     </div> 

</body>

我有包含一個h1和一個p身體一個div。當我將鼠標移到它上面時，沒有任何反應。有什麼問題嗎？

來源

2013-03-23 user2167264

你能發佈你的html嗎？ – 2013-03-23 21:27:22

@KyleWeller是因爲我有一張圖片作爲背景圖片嗎？ – user2167264 2013-03-23 21:31:57

@KyleWeller我已經添加了html，現在 – user2167264 2013-03-23 21:33:36

你的錯縮進隱藏了一個語法錯誤：

$(document).ready(function(){ 
    $("#header").mouseenter(function(){ 
     $("#header").fadeTo('fast', 1); 
    }); 
    $("#header").mouseleave(function(){ 
     $("#header").fadeTo('fast', 0.5); 
    }); 
}); // <= missing parenthesis

比，it works其他。小心0.5對於所有顏色組合都不是真的透明。

來源

2013-03-23 21:29:09

無論如何不工作 – user2167264 2013-03-23 21:30:48

你試試我鏈接到的小提琴嗎？它完美的作品。點擊「使用js運行」按鈕。 – 2013-03-23 21:31:30

是的，它在那裏工作，但不是當我在我的瀏覽器上嘗試它 – user2167264 2013-03-23 21:37:13

css怎麼樣？

#header { 
    opacity: .5; 
    transition: opacity .3s ease-in-out; 
} 
#header:hover { 
    opacity: 1; 
}

只要確保添加所有的CSS供應商前綴。這比使用jQuery IMO更好。如果瀏覽器不支持transition或opacity這沒什麼大不了的，那就是「優雅的退化」。

來源

2013-03-23 21:29:12 elclanrs

工作！謝謝，但我仍然不明白爲什麼它不能與我的JS代碼工作... – user2167264 2013-03-23 21:39:50

jquery mouseenter and fadeTo

回答

相關問題