切换宽度调整动画 - jQuery

Question

我有一个 `

` 和一个 ``。该 div 的宽度为 300 像素。我希望当用户单击触发器时，该 div 的宽度调整为 100 像素，并且当用户再次单击触发器时，它会恢复到以前的大小。如何使用 jQuery 实现这一点？

提前感谢... :)

blasteralfred

- Alfred

---

你已经在这里发布了这个问题：http://stackoverflow.com/questions/5583909/jquery-animate-function-hide-and-stretch-divs - Naftali

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

- sadmicrowave

Answer 2

这是此切换的HTML部分：

<div id="start">
    <div class="slide"></div>
</div>

这是针对CSS部分的代码：

<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>

- Pramod Kumar Gangwar

Answer 3

类似这样的东西应该就可以解决问题了。

$('#trigger').bind('click', function() { $('#test').animate({"width": "100px"}, "slow"); })

- downed

---

那个解决方案只适用于第一次点击，之后的所有点击都不会有任何可见的反应。此外，我通常更喜欢对动画函数的速度有更多的控制，所以我倾向于指定实际的毫秒数，而不是慢、中等或快。 - sadmicrowave

Answer 4

对于那些寻找更短但仍然有效的版本的人，您可以这样做：

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

- Joscplan

Answer 5

你需要将一个 .click() 事件绑定到 #trigger 并切换动画。

http://api.jquery.com/toggle/

http://api.jquery.com/animate/

- stlvc