Jquery animate dynamic width?

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/

When hover any tab, the tab stretch and shown hidden text, but if I change animate width option as "auto", effect not work. How can I fix this?

Answer 1

It's not possible to do animate height and width to auto. So this is Darcy Clarke's method to allow that to work.

See the changes that i made in your file. Basically you need to create the method animateAuto and call it when you need to animate.

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

usage:

$(".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/

Hope it solves your problem

Answer 2

Maybe like this, setting content of an hidden span to get corresponding width:

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