0

当用户将鼠标悬停在它们上方时，我试图让每个链接都动画化，最好的方法是什么？

我的代码是

    <ul class="nav">
    <li><a href="batting.html"class="nav">Batting</a></li>
    <li><a href="bowling.html"class="nav">Bowling</a><li>
    <a href="index.html"><img class="logo" src="images/logo.gif" width="125" height="125"></a> 
    <li><a href="fielding.html"class="nav">Fielding</a></li>
    <li><a href="game.html"class="nav">The Game</a></li>
    </ul>

谢谢。

4

4 回答 4

3

是的，可以使用纯 HTML 标记和 CSS 在任何元素上添加悬停动画。

.animated
{
  transition: prop;
  prop: value1;
}

.animated:hover
{
  prop: value2;
}

prop您不想动画的 CSS 属性在哪里。这在大多数浏览器中都非常有效。此外，也可以使用脚本创建此行为。

使用您的标记，最好和最简单的无脚本动画解决方案是使用:hover和transition. 这是一个如何制作动画的小提琴：http margin-left: //jsfiddle.net/9kpfW/

您可以使用数字度量为任何属性设置动画。（12px、12em、12% 等） 也可以使用非数字属性（即text-align）添加悬停效果，但不能应用过渡。此外，还可以使用 为同一元素上的多个属性设置动画transition。

因此，您可以纯粹使用 CSS 创建非常丰富的效果。不需要 JavaScript。:hover效果几乎适用于所有浏览器，包括旧版本的 Internet Explorer。但是，如果您需要支持具有相同动画过渡效果的过时浏览器，则需要使用几乎所有浏览器都支持和启用的 JavaScript。我推荐使用 jQuery JavaScript 库来简化你的脚本。

根据luckamit 的回答，这里有一个margin-left使用jQuery 的相同动画的简单示例。这几乎适用于任何网络浏览器，包括古代版本。

$(".nav li").hover(
 function()
 {
     $(this).find("a").stop().animate({"margin-left" : "40px"});
  },
 function()
 {
     $(this).find("a").stop().animate({"margin-left": "5px"});
 }
);

小提琴：http: //jsfiddle.net/LxAva/1/

但是，如果您不需要在那些稀有的浏览器中提供相同的体验，我推荐纯 CSS 解决方案，因为它具有将标记、样式和逻辑解耦的原则。丰富的过渡效果更多地与样式相关而不是逻辑，因此应该使用 CSS 而不是 JavaScript 来解决它们。此外，在大多数情况下，CSS 更容易和更快地实现。

于 2013-09-22T08:40:14.270 回答
0

这是一个小提琴

<ul class="nav">
  <li><a href="index.html"><img class="logo" src="images/logo.gif"/></a></li>
  <li><a href="batting.html">Batting</a></li>
  <li><a href="bowling.html">Bowling</a></li>
  <li><a href="fielding.html">Fielding</a></li>
  <li><a href="game.html">The Game</a></li>
</ul>


ul {
  list-style: none;
}
li {
  background: #555;
  float: left;
  margin-right: 15px;
  text-align: center;
  border: 1px solid #333;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}
li:hover {
  margin-top: -22px;
}
li a {
  display: block;
  height: 25px;
  width: 120px;
  color: #fff;
  letter-spacing: 1px;
  text-decoration: none;
  padding-top: 4px;
}

jQuery解决方案

$('li').hover(function() {
  $(this).stop().animate({ marginTop: '-22px' }, 450);
},function() {
  $(this).stop().animate({ marginTop: '0' }, 450);
});

CSS 中的更改 - 移除了过渡属性。

li {
  background: #555;
  float: left;
  margin-right: 15px;
  text-align: center;
  border: 1px solid #333;
}
li:hover {

}
于 2013-09-22T08:46:39.127 回答
0

您可以使用 jQuery 尝试以下一种。

$('.nav a').mouseover(function(){

//在这里添加动画变化

}).mouseout(函数(){

// 在此处添加默认行为

})

于 2013-09-22T08:52:04.900 回答
0

试试这个

//HTML

<ul class="nav">
<li><a href="batting.html"class="nav">Batting</a></li>
<li><a href="bowling.html"class="nav">Bowling</a><li>
<a href="index.html"><img class="logo" src="images/logo.gif" width="125" height="125"></a> 
<li><a href="fielding.html"class="nav">Fielding</a></li>
<li><a href="game.html"class="nav">The Game</a></li>
</ul>

//脚本

 $(".nav").hover(function(){
 $(this).stop().animate({"top" : "10px"});
  }, function(){
  $(this).stop().animate({"top": "0"});
  });

//CSS

  .nav
{
    position: relative;
}

这是给你的DEMO，检查一下。

于 2013-09-22T08:54:08.110 回答