切换宽度调整动画 - 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的主要内容,如果未能解决你的问题,请参考以下文章

jquery动画不同的img宽度

平滑这个 jQuery 切换动画?

Jquery:动画.outerWidth()?

通过切换布局触发的动画 UICollectionView 单元格调整大小

jQuery垂直切换相册图片js动画效果

JQuery: JQuery效果(隐藏显示切换,滑动,淡入淡出,以及动画)