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

最新推荐文章于 2023-02-28 10:13:05 发布

原创最新推荐文章于 2023-02-28 10:13:05 发布 · 439 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

60 篇文章

订阅专栏

本文档通过一个具体的示例展示了如何使用HTML与JavaScript来创建一个可交互的面板元素，其中包括了如何添加图标以及实现点击展开效果等功能。示例中详细介绍了如何利用jQuery库来操作DOM元素，实现面板头部图标旋转动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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