Question

我有一个看起来像这样的.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文件与我的视图正确连接。我通过创建一个简单的函数来检查它，我在鼠标点击特定元素时调用它。

Answer 1

您可以将transitions与:hover一起使用来缩放当前悬停的锚点。

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>

Answer 2

您的代码似乎有误：

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

Answer 3

<强> DEMO

使用.find代替.children作为li，child引导#header_menuId，并将($this)更改为{ {1}}

$(this)

您也可以使用$("#header_menuId").find("li").each(function(){ $(this).mouseover(function(){ $(this).animate({ height: '+=150px', width: '+=150px' }); }); }); - .on直接将事件绑定到mouseover，如下所示：

li

<强> UPDATED DEMO

Answer 4

尝试使用悬停，将悬停处理程序直接附加到li元素，然后在这种情况下不需要每个函数：

$("#header_menuId li").hover(function () {
   $(this).stop().animate({ // mouseenter
     height: '+=150px',
     width: '+=150px'
   });
 }, function () {
   $(this).stop().animate({ // mouseleave
    height: '-=150px',
    width: '-=150px'
   });

});

DEMO

Answer 5

试试这个

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

ng-repeat

鼠标移动<li>元素

5 个答案: