切换宽度调整动画 - jquery
Posted
技术标签:
【中文标题】切换宽度调整动画 - jquery【英文标题】:toggle width resize animation - jquery 【发布时间】:2011-07-31 20:51:36 【问题描述】:我有<div id="test"></div>
和<a id="trigger"></a>
。 Div 的宽度为 300 像素。我希望 div 在用户单击触发器时将其宽度调整为 100px,并希望在用户再次单击触发器时将其调整为以前的大小。我怎样才能使用 jquery 制作这个??
提前谢谢...:)
爆破
【问题讨论】:
你已经在这里发布了这个问题:***.com/questions/5583909/… 【参考方案1】:将变量赋值为 1 表示点击,0 表示取消点击,然后使用 .click 函数如下:
$(document).ready(function()
TriggerClick = 0;
$("a#trigger").click(function()
if(TriggerClick==0)
TriggerClick=1;
$("div#test").animate(width:'100px', 500);
else
TriggerClick=0;
$("div#test").animate(width:'300px', 500);
;
);
);
更新 - 更好的答案
我不久前提出了这个建议;但相信有一种更优雅、更务实的方法可以解决这个问题。您可以使用 CSS 转换并让 jquery 简单地添加/删除启动转换的类:
工作小提琴: https://jsfiddle.net/2q0odoLk/
CSS:
#test
height: 300px;
width: 300px;
background-color: red;
/* setup the css transitions */
-webkit-transition: width 1s;
-moz-transition: width 1s;
transition: width 1s;
#test.small
width: 100px;
jQuery:
$("a#trigger").on('click', function()
$("div#test").toggleClass('small');
);
【讨论】:
【参考方案2】:这是此切换的html Part
:
<div id="start">
<div class="slide"></div>
</div>
这是CSS part
:
<style>
#start margin-bottom:60px; display:block; font-size:16px; width:14px; height:79px; position:relative; top:25px; line-height:21px; color:#F0F; background:url(./start1.JPG) left top no-repeat;
.slide background:#98bf21; max-width:500px; width:100; height:100px;position:absolute; left:14px;
</style>
<script>
$(document).ready(function()
function tog()
var w = $(".slide").css('width');
if(w=='0px')
$(".slide").animate(
width:500
);
else
$(".slide").animate(
width:0
);
$("#start").click(function()
tog();
);
);
</script>
【讨论】:
【参考方案3】:您需要将 .click()-Event 绑定到 #trigger 并切换动画。
http://api.jquery.com/toggle/
http://api.jquery.com/animate/
【讨论】:
【参考方案4】:这样的事情应该可以解决问题。
$('#trigger').bind('click', function() $('#test').animate("width": "100px", "slow"); )
【讨论】:
该解决方案仅适用于第一次点击,之后的所有其他点击都不会导致任何明显的事情发生。此外,我通常喜欢对动画函数的速度进行更多控制,因此我倾向于指定实际的毫秒数,而不是慢、中或快。【参考方案5】:对于那些寻找更短但有效的版本的人,您可以这样做:
$('a#trigger').on('click', function(e)
e.preventDefault();
var w = ($('div#test').width() == 300 ? 100 : 300);
$('div#test').animate(width:w,150);
);
最短的版本:
$('a#trigger').on('click', function(e)
e.preventDefault();
$('div#test').animate(width:($('div#test').width() == 300 ? 100 : 300),150);
);
关于函数:
function toggleWidth(target, start, end, duration)
var w = ($(target).width() == start ? end : start);
$(target).animate(width:w,duration);
return w;
用法:
$('a#trigger').on('click', function(e)
e.preventDefault();
toggleWidth($("div#test"), 300, 100, 150);
);
终于有了一个 JQuery.fn.extend 函数:
jQuery.fn.extend(
toggleWidth: function(start, end, duration)
var w = ($(this).width() == start ? end : start);
$(this).animate(width:w,duration);
return w;
);
用法:
$('a#trigger').on('click', function(e)
e.preventDefault();
$("div#test").toggleWidth(300, 100, 150);
);
【讨论】:
以上是关于切换宽度调整动画 - jquery的主要内容,如果未能解决你的问题,请参考以下文章