1

HTML

<div class="wrapper">
    <a href="#" class="tabs"><span>Tab-1 Text</span></a>
    <a href="#" class="tabs"><span>Tab-2 Text</span></a>
    <a href="#" class="tabs"><span>Tab-3 Text</span></a>
    <a href="#" class="tabs"><span>Tab-4 Text</span></a>
</div>

CSS

.wrapper{
    width:200px; 
    height:auto;  
    display:inline-block; 
    -webkit-border-bottom-right-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-topright: 3px;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;    
}
.wrapper .tabs{
    height:30px; 
    display:block; 
    -webkit-box-shadow: 1px 1px 6px #ccc inset;
    -moz-box-shadow: 1px 1px 6px #ccc inset;
    box-shadow: 1px 1px 6px #ccc inset; 
    -webkit-border-bottom-right-radius: 3px;        
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-topright: 3px;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    margin-bottom:1px;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
    text-decoration:none; 
    font-size:11px; 
    line-height:30px; 
    overflow:hidden;
    width:30px;
}
.wrapper .tabs span{    
    padding-left:35px;
    color:#000000;
    font-weight:bold;
    height:30px;
    display:block;
    width:auto;
 }

查询

$(".wrapper").on("mouseenter",".tabs",function(){
    $(this).stop().animate({
        width:"202px",
        duration:"fast"                 
});     
}).on("mouseleave",".tabs",function(){
    $(".tabs").stop().animate({
        width:"30px",
        duration:"fast"
    });
});

提琴手

http://jsfiddle.net/PMBxT/

当悬停任何选项卡时，选项卡会拉伸并显示隐藏文本，但如果我将动画宽度选项更改为“自动”，效果不起作用。我怎样才能解决这个问题？

4

2 回答 2

3

也许像这样，设置隐藏跨度的内容以获得相应的宽度：

http://jsfiddle.net/PMBxT/1/

$(".wrapper").on("mouseenter",".tabs",function(){
    $('#hide').html(this.innerHTML);
    $(this).stop().animate({
        width:$('#hide').width(),
        duration:"fast"                 
    });     
}).on("mouseleave",".tabs",function(){
    $(".tabs").stop().animate({
        width:"30px",
        duration:"fast"
    });
});
于 2013-06-06T14:59:24.243 回答
1

无法将动画高度和宽度设置为自动。所以这是达西克拉克允许它工作的方法。

查看我在您的文件中所做的更改。基本上你需要创建方法 animateAuto 并在需要动画时调用它。

查询

jQuery.fn.animateAuto = function(prop, speed, callback){
   var elem, height, width;
   return this.each(function(i, el){
       el = jQuery(el), 
       elem = el.clone().css({"height":"auto","width":"auto"}).appendTo("body");
       height = elem.css("height"),
       width = elem.css("width"),
       elem.remove();

       if(prop === "height")
           el.animate({"height":height}, speed, callback);
        else if(prop === "width")
           el.animate({"width":width}, speed, callback);  
        else if(prop === "both")
           el.animate({"width":width,"height":height}, speed, callback);
    });  
}

用法：

$(".wrapper").on("mouseenter",".tabs",function(){
    $(this).stop().animate({
    width:"202px",
    duration:"fast"                 
});     
}).on("mouseleave",".tabs",function(){
    $(".tabs").stop().animateAuto("width", 1000); 
});

提琴手

http://jsfiddle.net/PMBxT/3/

希望它能解决你的问题

于 2013-06-06T15:24:00.190 回答