CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Darklizard
Darklizard

Reputation: 377

JQuery smooth animation for an auto-width div

Directy this is a fragment of my current projecet.

Please click FIDDLE here.

Simply, I created a list containing these buttons:

 <a href="#f1" class="bt">1
    <div class="show">Computers Networking</div>
  </a>

and when mouseover bt button, the tips show slide to the right.

The question is, as you have seen in the demo, it cannot grow smoothly and the words appears suddenly. If I fixed the width of tips, this porblem solved, but not what I want.

Thank you very much!

Upvotes: 2

Views: 311

Answers (3)

Pragnesh Rupapara
Pragnesh Rupapara

Reputation: 802

i have created a jsfiddle for you for smooth animation,here is code check out.

http://jsfiddle.net/Hj9VH/5/

 $.easing.elasout = function(x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};

$(".jumper .bt").mouseover(function(){
    console.log("faqffff");
    $(this).find(".show").css({'width':'auto', 'padding':'0 10px'},'1000','swing');
  });
  $(".jumper .bt").mouseout(function(){
    $(this).find(".show").animate({'width':'0', 'padding':'0'},'500','elasout');
  });

Upvotes: 0

droymanz
droymanz

Reputation: 343

You need to get the width of content inside of div .show using javascript scrollWidth

var showWidth = $(this).find('.show')[0].scrollWidth;

Then call that variable in your function

$(".jumper .bt").mouseover(function(){
    console.log("faqffff");
    var showWidth = $(this).find('.show')[0].scrollWidth;
    $(this).find(".show").css({'width':showWidth+'px', 'padding':'0 10px'});
});

Check this DEMO

Upvotes: 1

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

Use jQuery animate() function you can archive this smooth animation

Check this Demo jsFiddle

$(".jumper .bt").mouseover(function(){
    $(this).find(".show").animate({width:'200px', padding: "0 10px"}, '700');
});
$(".jumper .bt").mouseout(function(){
    $(this).find(".show").animate({'width':'0', padding: "0"}, '700');
});

jQuery Animate() Method

Syntax

.animate( {css_properties} [, duration ] [, easing ] [, callback_function ] )

Duration

  • milliseconds (1000 miliseconds = 1sec)
  • "slow"
  • "fast"

easing

  • "swing" - starting and ending move slower and middle move faster
  • "linear" - move same speed

Callback_function

When done specified function call.

Upvotes: 1

Related Questions