animate step()下拉列表右三角动画效果

太过爱你忘了你带给我的痛 2022-05-26 07:35 135阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="http://lib.baomitu.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
    <div id="running" class="tab-pane active">
    
              <div class="panel-group" id="accordion">
                <div class="panel panel-default">
    
                  <div class="panel-heading">
                    <a data-toggle="collapse" data-target="#collapseOne" href="#" aria-expanded="true" class="">
                      Terminals
                    </a>
                  </div>
                </div>
              </div>
            </div>
    </body>
    
    
    </html>
    <script src="http://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
    
    <script>
        $('#running .panel-group .panel .panel-heading a').each(function (index, el) {
            var isRTL = 1;
            var $link = $(el);
            var $icon = $('<i />').addClass('glyphicon glyphicon-triangle-bottom');
            $link.append($icon);
            $link.down = true;
            $link.click(function () {
                if ($link.down) {
                    $link.down = false;
    
                    $icon.animate(
                        {
                        borderSpacing: 90,
                    },
                        {
                        step: function (now, fx) {
                            isRTL== 2 ? $icon.css('transform', 'rotate(' + now + 'deg)') : $icon.css('transform', 'rotate(-' + now + 'deg)');
                        }
                    },
                        250
                    );
                } else {
                    $link.down = true;
                    // See comment above.
                    $icon.animate({borderSpacing: 0}, {
                        step: function (now, fx) {
                            isRTL== 2 ? $icon.css('transform', 'rotate(' + now + 'deg)') : $icon.css('transform', 'rotate(-' + now + 'deg)');
                        }
                    }, 250);
                }
            });
        });
    
    </script>