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

我试图对每个元素的宽度进行动画化处理，但它不工作... –

“数据文本”方法根本没有在其上添加任何内容。 –