Как мога да накарам връзки за навици да анимират, когато мишката се движи над тях? - javascript, jquery, html, css

Опитвам се да накарам всяка връзка да анимира, когато потребителят задържи курсора върху тях, какъв е най-добрият начин да направите това?

кодът ми е

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

Благодаря.

Отговори:

3 за отговор № 1

Да, това е възможно да добавите анимация на курсора върху всеки елемент, използвайки чисто HTML маркиране и CSS.

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

.animated:hover
{
prop: value2;
}

Където prop е свойството CSS, което не искате да бъдете анимирани. Това работи много добре в повечето браузъри. Също така е възможно да се създаде това поведение и със скриптове.

С вашата маркировка, най-доброто и най-лесното решение за анимация без скрипт е да използвате :hover и transition, Ето една скрипка как да анимирате margin-left: http://jsfiddle.net/9kpfW/

Можете да анимирате всяко свойство с цифрова мярка, (12px, 12em, 12% и т.н.) Възможно е да се добавят влияния на курсора с не-цифрови свойства (т.е. text-align) също, но не можете да приложите преход. Също така е възможно да се анимират множество свойства на един и същ елемент, като се използва transition.

Така че можете да създавате много богати ефекти чисто с CSS. Не е необходим JavaScript. :hover ефекти работят добре в почти всеки браузър,включително древни версии на Internet Explorer. Ако обаче трябва да поддържате остарели браузъри със същия анимиран ефект на преход, трябва да използвате JavaScript, който се поддържа и активира в почти всеки браузър. Препоръчвам да използвате библиотеката на jQuery JavaScript, за да опростите скриптите си.

Въз основа на отговора на luckyamit, ето един тривиален пример за същото 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/

Ако обаче не е нужно да обслужвате същотоопит в тези редки браузъри, препоръчвам решението pure-CSS поради принципа на разделяне на маркирането, стила и логиката. Богатите ефекти на прехода са много по-свързани със стила, отколкото логиката, така че те трябва да се решават с CSS, вместо с JavaScript. Освен това в повечето случаи CSS е по-лесен и по-бърз за изпълнение.

---

0 за отговор № 2

Можете да опитате под един с помощта на jQuery.

$ (". nav a"). мишката (функция () {

// добавете анимирани промени тук

}). Е извън него (функция () {

// добавете тук поведението по подразбиране

})

---

0 за отговор № 3

Пробвайте това

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

// SCRIPT

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

// CSS

  .nav
{
position: relative;
}

Тук е ДЕМОНСТРАЦИЯ за теб, просто го провери.

---

0 за отговор № 4

Тук е цигулка

<ul class="nav">
<li><a href="index.html"><img class="logo" src="/images/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 {

}

---