切换宽度调整动画- jquery
toggle width resize animation - jquery
我有<div id="test"></div>
和<a id="trigger"></a>
。Div的宽度为300px。当用户点击触发器时,我想把div的宽度调整为100px,当用户再次点击触发器时,我想把它的大小调整为以前的大小。我如何使用jquery做到这一点??
提前感谢……:)
blasteralfred
为click指定变量1,为unclick指定变量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');
});
这是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>
你需要绑定一个。click()-Event来#trigger并切换动画。
http://api.jquery.com/toggle/http://api.jquery.com/animate/像这样的东西应该很有用。
$('#trigger').bind('click', function() { $('#test').animate({"width": "100px"}, "slow"); })
对于那些寻找更短但仍有效的版本的人,您可以这样做:
$('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代码
- 如何禁用可排序动画 Jquery
- 离开页面前的动画JQuery
- 动画Jquery弹出菜单
- 设置元素动画jquery
- 如何自动动画jquery画廊
- 缩放/动画 jQuery 拖放到可拖放时可拖动
- 卡片动画Jquery和CSS
- 拆分襟翼文本动画 Jquery
- 满足条件时禁用动画 jQuery
- 传递参数以动画 jquery 函数
- 延迟和动画 jQuery
- 获取动画 jQuery Java 脚本中行进的像素数
- 重新启动动画jquery和javascript
- 为什么这个脚本在页面加载后3秒没有动画(jquery)
- 菜单图标动画jQuery
- 制作无限动画jQuery
- 将延迟应用于动画jquery
- 添加滑动回调动画Jquery
- 使用动画 jquery 更改文本