Question

我正在为我的网站创建一个导航栏，我希望幻灯片的动画显示其中任何文本的宽度。我也希望所有内容都在一行上。这是迄今为止的jsfiddle和我的jquery代码

http://jsfiddle.net/2UEpd/26/ $（document）.ready（function（）{

$("#test").hide();
$(".title").hide();



$(".home").click(function (){
    $("#test").slideToggle("slow");
});

$(".slideWrapper").hover(

function () {     
    $(this).children(".slideNav:eq(0)").stop().animate({
        width: "112px",
        height: "30px"
    });

    $(this).children(".slideBox:eq(0)").stop().animate({
        left: "112px",
        opacity: "1"
    });

    $(this).find(".title").show();


}, function () {
    var $box = $(this).children(".slideBox:eq(0)");

    $(this).children(".slideNav:eq(0)").stop().animate({
        width: "0px",
        height: "30px"

    });

    $(this).children(".slideBox:eq(0)").stop().animate({
        left: "0px",
        opacity: ".7"
    });

    $(this).find(".title").hide();

});

}）;

我已经尝试了一段时间，任何帮助都表示赞赏。

Answer 1

Display:table属性或inline-block会有所帮助。

一个想法是播放宽度text-indent和letter-spacing。

这里是一个仅通过CSS的想法示例，使用表格布局属性，因此容器适合其内容文本使用的宽度。 http://codepen.io/gc-nomade/pen/kaEoe

基本上：

.slideNav {
  height: 30px;
  width: 0px;
  padding:0 15px;/* gives it 30px width minimal */
  line-height:30px;
  display:table;/* shrink /expand to size needed by content */
  position: relative; 
  white-space:nowrap;
  text-indent:-3em;
  letter-spacing:-1em;  
  transition:1s; linear ;
  opacity: .7;
  color: transparent;
}
.slideNav:hover {/* here set back to regular setting to layout text properly */
  opacity:1;
  text-indent:0em;
  letter-spacing:1px;
  color: white;
}

菜单上的切换点击关闭/打开功能通过以下方式驱动：针对demo prpose的focus和pointer-events。 javaScript应该为了更好/更好的实践而处理这个问题。

动画条到文本宽度的动画

1 个答案: