Jquery 动画动态宽度
Jquery animate dynamic width?
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/
将鼠标悬停在任何选项卡上时,选项卡会拉伸并显示隐藏的文本,但是如果我将动画宽度选项更改为"自动",效果将不起作用。我该如何解决这个问题?
也许像这样,设置隐藏范围的内容以获得相应的宽度:
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"
});
});
无法将
高度和宽度动画设置为自动。所以这是达西克拉克的方法,允许它起作用。
查看我在您的文件中所做的更改。基本上,您需要创建方法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/
希望它能解决您的问题
相关文章:
- 工件出现在动态生成的&iOS上的动画画布图像
- 如何使用javascript设置元素旋转和动态观察的动画
- SVG元素的动态动画在IE中不起作用
- Three.js中的动态骨骼动画
- 带有动态部分的动画画布
- 在小间隔内通过javascript更新css时,会出现断断续续的动态观察动画
- 动态文本的 SVG 线条动画
- 动态.js动画 包含形状和文本的多个组
- 将YouTube/Vimeo视频转换为无声的动画图像(想想哈利波特中的“动态图片”)
- 流星:动画(淡入/淡出)动态模板数据
- CSS3 获取动画的动态值
- Rapahel js :动态定位和动画
- svg 动画从动态值转换
- 动态动画
- 如何在不刷新的情况下删除动态创建的表行(最好使用标准的向左滑动动画)
- 在画布图像上动态设置色调偏移的动画
- 对象上的流体和动态动画出现和消失(HTML/JS/CSS)
- 动态动画的问题
- 在创建时动态动画元素
- 可访问的动态动画信息框