動畫不透明度混淆了我的文本

我試圖創建以下效果：當我在我的鏈接上懸停時，該鏈接更改顏色，此部分工作的但代碼問題是當我將鼠標懸停在上方時看不到文本。我知道，我可以通過添加圖片到我的跨度和錨標記解決這個問題，我也知道，是動畫顏色的插件，但如果可能的我想解決這個WITHOUT背景圖片插件。那可能嗎？
我創建了這個FIDDLE爲您查看我的問題。動畫不透明度混淆了我的文本

我的代碼：

$(document).ready(function() { 
    $('.link').hover(function() { 
     var heightCheck = $(this).outerHeight(); 
     //alert(heightCheck); 
     $(this).stop().animate({ 
      opacity: 0 
     }, 1000); 
     $('.yellow').height(heightCheck); 
     $('.yellow').css({ 
      'margin-top': -heightCheck 
     }); 
    }, function (heightCheck) { 
     $(this).stop().animate({ 
      opacity: 1 
     }, 1000, function() { 
      $('.yellow').css({ 
       'margin-top': +heightCheck 
      }); 
     }); 
    }); 
});

來源

2012-07-03 Dejo Dekic

那麼，你已經在使用jQuery，爲什麼不使用jQuery UI（你引用的插件）並且用一個元素來做所有事情。

想一想，你會記得包括額外的.yellow範圍每次你想要一個這樣的鏈接？

另外，爲什麼不使用漸進式增強，並用CSS做這一切？你甚至可以爲IE做一個jQuery的後備？

看到我附上的小提琴。

http://jsfiddle.net/nzcGy/3/

來源

2012-07-03 07:24:38

+1，但甚至比做一個檢查因爲ie會使用modernizr並檢查[css動畫]（http://modernizr.com/docs/#features-css） – steveax

這種方法的優點是適用於Chrome，Safari和Firefox - 您不需要必須使用任何javascript！我們只需要使用js來討厭IE瀏覽器 –

同意，但我認爲這可能會讓我們自己提前一點:) –

如果我理解你想在這裏實現什麼，這看起來將與CSS的一行來解決。例如...

.link:hover { background-color: yellow;}

您無法看到您的文字的原因是導致不透明：0使其不可見。

來源

2012-07-03 07:05:28 brains911

Thx for answer !!沒有工作:(我知道不透明是問題，但不知道如何實現我的文字顯示:( –

將其更改爲灰色背景顏色應用於li風格而不是鏈接本身。爲.link取下動畫不透明線。

也許這樣？ http://jsfiddle.net/5bXHW/

來源

2012-07-03 07:21:15

Txh的答案，但看起來像我將不得不使用jQuery UI！ –

我打得四處不透明度爲得到這樣的結果，看起來好多了，現在http://jsfiddle.net/kyWth/37/環節的透明度和跨度不透明度都設置爲0.5了。它接近你想要的東西嗎？

UPDATE在此處對您的代碼進行了更改http://jsfiddle.net/kyWth/39/，作品完美無缺，您也不需要跨度。

來源

2012-07-03 07:25:48

動畫不透明度混淆了我的文本

回答

相關問題