JQuery平滑动画为自动宽度div

Question

Directy这是我当前项目的一个片段。

请点击FIDDLE此处。

简单地说，我创建了一个包含这些按钮的列表：

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

当鼠标悬停bt按钮时，提示show向右滑动。

问题是，正如您在演示中所看到的那样，它无法顺利发展并且突然出现这些词。如果我修正了提示的宽度，这个问题就解决了，但不是我想要的。

非常感谢！

Answer 1

使用jQuery animate()功能可以存档这个流畅的动画

检查此 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（）方法

语法

  

.animate（{css_properties} [，duration] [，easing] [，callback_function]）

持续时间

• 毫秒（1000毫秒= 1秒）
• “slow”
• “快”

缓和

• “swing” - 开始和结束移动慢，中间移动更快
• “linear” - 移动速度相同

CALLBACK_FUNCTION

完成指定的函数调用。

Answer 2

您需要使用javascript .show

获取div scrollWidth内的内容宽度

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

然后在函数中调用该变量

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

选中 DEMO

Answer 3

我为你创建了一个jsfiddle，用于平滑动画，这里是代码检查。

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