个人中心
gpt4 book ai didi

javascript - 鼠标悬停在
  • 元素上时动画

    • 转载 作者：行者123 更新时间：2023-11-30 16:31:57 28 4
    gpt4 key购买 nike

    我有一个看起来像这样的 .ctp 文件:

    <body id="bodyId">
        <div id="header">
            <div class="row">
                <div class="col-xs-4"></div>
                <div class="col-xs-offset-6" id="header_menuId">
                    <ul class="nav nav-pills">
                        <li><a href="#">Home</a>
                        </li>
                        <li><a href="#">Login</a>
                        </li>
                        <li><a href="#">SignUp</a>
                        </li>
                        <li><a href="#" data-toggle="modal" data-target="#myModal">Search</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="content">
            <?php echo $this->Session->flash(); ?>
            <?php echo $this->fetch('content'); ?>
        </div>
        <div id="footer"></div>
        <?php echo $this->element('sql_dump'); ?>
    </body>

    现在，我希望我的 li 元素在每次我将鼠标滚动到其中任何元素时弹出一点点。但是，我一直没有这样做。我的 jquery 代码如下所示:

    $(function () {
        $("#header_menuId").children("li").each(function () {
            $(this).mouseover(function () {
                ($this).animate({
                    height: '+=150px',
                    width: '+=150px'
                });
            });
        });
    });

    我试了下好像不行。因为，我是 CakePHP 和 JQuery 的新手，可能是我在这里遗漏了一些东西。我也尝试使用 mouseenter() 而不是 mouseover()。 .js 文件与我的 View 正确连接。我通过创建一个简单的函数来检查它，我在鼠标点击特定元素时调用该函数。

    最佳答案

    您可以使用 CSS transitions使用 :hover 缩放当前悬停的 anchor 。

    jsFiddle Demo 

    a {
      display: inline-block;
      -webkit-transition: all 200ms ease-in;
      -webkit-transform: scale(1);
      -ms-transition: all 200ms ease-in;
      -ms-transform: scale(1);
      -moz-transition: all 200ms ease-in;
      -moz-transform: scale(1);
      transition: all 200ms ease-in;
      transform: scale(1);
    }
    a:hover {
      -webkit-transition: all 200ms ease-in;
      -webkit-transform: scale(1.5);
      -ms-transition: all 200ms ease-in;
      -ms-transform: scale(1.5);
      -moz-transition: all 200ms ease-in;
      -moz-transform: scale(1.5);
      transition: all 200ms ease-in;
      transform: scale(1.5);
    }
    <ul class="nav nav-pills">
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Login</a>
      </li>
      <li><a href="#">SignUp</a>
      </li>
      <li><a href="#" data-toggle="modal" data-target="#myModal">Search</a>
      </li>
    </ul>

    如果您仍然想使用 jQuery，您可以使用 hover 和 animate 来设置字体大小的动画。

    // On hover of li
    $("#header_menuId li").hover(function() {

      // Stop previous animation and increase the fontsize
      $(this).stop(true, true).animate({
        fontSize: '+=15px'
      });
    }, function() {
      // Stop previous animation and decrease the fontsize
      $(this).stop(true, true).animate({
        fontSize: '-=15px'
      });
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <div class="col-xs-offset-6" id="header_menuId">
      <ul class="nav nav-pills">
        <li><a href="#">Home</a>

        </li>
        <li><a href="#">Login</a>

        </li>
        <li><a href="#">SignUp</a>

        </li>
        <li><a href="#" data-toggle="modal" data-target="#myModal">Search</a>

        </li>
      </ul>
    </div>

    关于javascript - 鼠标悬停在 <li> 元素上时动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33206993/

    28 4 0
    文章推荐： c# - 在 .Net 中 Hook
    文章推荐： 在c中使用malloc创建数组
    文章推荐： c# - ObjectDataSource 找不到非泛型方法
    文章推荐： c - ESP8266无法连接到客户端
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com