Javascript 切换宽度调整大小动画 - jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5584527/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
toggle width resize animation - jquery
提问by blasteralfred Ψ
I have <div id="test"></div>and <a id="trigger"></a>. Div has width 300px. I want the div to re size it's width to 100px when user click trigger and want to re size to previous size when user again click the trigger. How can i make this using jquery??
我有<div id="test"></div>和<a id="trigger"></a>。Div 的宽度为 300px。我希望 div 在用户单击触发器时将其宽度重新调整为 100px，并希望在用户再次单击触发器时将其调整为以前的大小。我怎样才能使用 jquery 做到这一点？
Thanks in advance...:)
提前致谢...:)
blasteralfred
布拉拉弗雷德
回答by sadmicrowave
Assign a variable of 1 for click and 0 for unclick and then use the .click function as follows:
为单击分配变量 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);
};
});
});
UPDATE - BETTER ANSWER
更新 - 更好的答案
I made this suggestion awhile back; but believe there is a more elegant and pragmatic approach to solving this. You could use CSS transitions and have jquery simply add/remove a class that initiates the transition:
不久前我提出了这个建议；但相信有一种更优雅和务实的方法来解决这个问题。您可以使用 CSS 转换并让 jquery 简单地添加/删除启动转换的类：
Working Fiddle: https://jsfiddle.net/2q0odoLk/
工作小提琴：https: //jsfiddle.net/2q0odoLk/
CSS:
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:
jQuery：
$("a#trigger").on('click', function(){
$("div#test").toggleClass('small');
});
回答by Pramod Kumar Gangwar
This is Html Partof this toggle:
这是Html Part这个切换：
<div id="start">
<div class="slide"></div>
</div>
This is CSS partfor that:
这是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>
回答by Joscplan
For those looking for a shorter but yet working version you could do this:
对于那些寻找更短但有效的版本的人，你可以这样做：
$('a#trigger').on('click', function(e) {
e.preventDefault();
var w = ($('div#test').width() == 300 ? 100 : 300);
$('div#test').animate({width:w},150);
});
The shortest version:
最短版本：
$('a#trigger').on('click', function(e) {
e.preventDefault();
$('div#test').animate({width:($('div#test').width() == 300 ? 100 : 300)},150);
});
On a function:
在函数上：
function toggleWidth(target, start, end, duration) {
var w = ($(target).width() == start ? end : start);
$(target).animate({width:w},duration);
return w;
}
Usage:
用法：
$('a#trigger').on('click', function(e) {
e.preventDefault();
toggleWidth($("div#test"), 300, 100, 150);
});
Finally on a JQuery.fn.extend function:
最后在 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;
}
});
Usage:
用法：
$('a#trigger').on('click', function(e) {
e.preventDefault();
$("div#test").toggleWidth(300, 100, 150);
});
回答by stlvc
You need to bind an .click()-Event to #trigger and toggle the animation.
您需要将 .click()-Event 绑定到 #trigger 并切换动画。
回答by downed
Something like this should to the trick.
这样的事情应该能解决问题。
$('#trigger').bind('click', function() { $('#test').animate({"width": "100px"}, "slow"); })
