jQuery的李與更多的文字

擴張一直試圖獲得這些li元素時，他們都將鼠標懸停在一個時間單獨展開，其一：http://jsfiddle.net/LU5dW/1/（使用data-text屬性）jQuery的李與更多的文字

而另一http://jsfiddle.net/LU5dW/使用跨度.menu_text類。無法讓任何一個人在這裏工作。

jQuery代碼使用.appenddata-text屬性：用display: none

$(document).ready(function() { 
    $("#menu a").hover(function() { 
     $(this).append($(this).children.eq(0).html("<span>" + $(this).children.eq(0).data('text') + "</span>")).css({width: 0}).stop(true, true).animate({width: "show"}, 700); 
      }, function() { 
        $(this).children(":last-child").stop(true, true).animate({width: "hide"}, 700).remove(); 
      }); 
});

jQuery代碼爲.menu_text類默認：

$(document).ready(function($) { 
    $("#menu a").hover(function() { 
       $(this).children(".menu_text").stop(true, true).animate({width: "show"}, 700); 
      }, function() { 
       $(this).children(".menu_text").stop(true, true).animate({width: "hide"}, 700); 
      }); 
});

真的可以用另一套的眼睛就這一個。謝謝你們:)

問題是我試圖讓每個項目擴大mouseenter和崩潰mouseleave，但沒有任何運氣與這些方法之一。該data-text方法拋出，我不是某處捕獲的錯誤...

編輯

這是現在使用data-text屬性，另一種方法差不多的工作，但它擴展所有li的元素，而不是隻是其中的1 ... arggg：http://jsfiddle.net/LU5dW/2/

$(document).ready(function() { 
    $("#menu li").hover(function() { 
     $(this).children("a").append("<span>" + $(this).children("a").children(':first-child').data('text') + "</span>").hide().stop(true, true).animate({width: "show"}, 700); 
      }, function() { 
        $(this).children("a").children(":last-child").stop(true, true).animate({width: "hide"}, 700).remove(); 
      }); 
});

來源

2014-01-17 Solomon Closson

那麼是什麼問題？ – Madbreaks

我試圖對每個元素的寬度進行動畫化處理，但它不工作... –

「數據文本」方法根本沒有在其上添加任何內容。 –