Question

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;
 }

JQUERY

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

的jsfiddle

http://jsfiddle.net/PMBxT/

当悬停任何标签时，标签拉伸并显示隐藏文字，但如果我将动画宽度选项更改为“自动”，则效果不起作用。我该如何解决这个问题？

Answer 1

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

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"
    });
});

Answer 2

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

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

<强> JQUERY

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); 
});

<强>的jsfiddle

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

希望它能解决你的问题

Jquery动画动态宽度？

2 个答案: