Как добавить анимацию при наведении курсора на ссылку уже анимированного изображения с помощью jQuery? - PullRequest
Новая
       15

Как добавить анимацию при наведении курсора на ссылку уже анимированного изображения с помощью jQuery?

2 голосов
/ 26 ноября 2011

У меня есть 'ul' ссылок на изображения, анимированных для постоянного перемещения, и я хотел бы знать, есть ли способ добавить еще одну анимацию, когда на них наведена мышь.

Изображения помещаются в div и уменьшаются до размера div, я бы хотел, чтобы они увеличивали при наведении, не останавливая оригинальную анимацию.

Я уже попробовал все, что мог придумать, но я только начал использовать jQuery, и я не могу понять это.

Вот ссылка: http://cqweblab.com/azbuka/azbuka.html

И код. HTML: 

<div id="azbuka">
<ul class="slova">
<li><img src="images/1.png" class="space"></li>
<li><div class="letter"><a href="#"><img src="images/a.png" class="firstAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/b.png" class="firstAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/v.png" class="secondAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/g.png" class="firstAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/d.png" class="firstAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/dj.png" class="secondAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/e.png" class="firstAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/zj.png" class="firstAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/z.png" class="secondAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/i.png" class="firstAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/j.png" class="firstAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/k.png" class="secondAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/l.png" class="firstAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/lj.png" class="firstAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/m.png" class="secondAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/n.png" class="firstAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/nj.png" class="firstAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/o.png" class="secondAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/p.png" class="firstAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/r.png" class="firstAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/s.png" class="secondAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/t.png" class="firstAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/cj.png" class="firstAnim"></a></div></li>
<li><img src="images/3.png" class="space"></li>
<li><div class="letter"><a href="#"><img src="images/u.png" class="secondAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/f.png" class="firstAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/h.png" class="firstAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/c.png" class="secondAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/ch.png" class="firstAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/dz.png" class="firstAnim"></a></div></li>
<li><div class="letter"><a href="#"><img src="images/sj.png" class="secondAnim"></a></div></li>

CSS: 

#azbuka {
width: 24.2em;
height: 11em;
margin: 10em auto 2em auto;
}

.letter {
width: 3em;
height: 2.81em;
position: relative;
float: left;
}

ul.slova {
list-style-type: none;
}

ul.slova li a img{
width: 100%;
height: 100%;
margin: 0 auto;
}

img.space {
position: relative;
float: left;    
}

И JQuery: 

function endlessFst(item) {
      $(item).animate({"width" : "95%" , "opacity" : "0.7"}, 700, function(){
        $(item).animate({"width" : "100%" , "opacity" : 1}, 700);
        endlessFst(item);
      });
    }

function endlessSnd(item) {
      $(item).delay(100).animate({"width" : "95%" , "opacity" : "0.7"}, 700, function(){
        $(item).delay(100).animate({"width" : "100%" , "opacity" : 1}, 700);
        endlessSnd(item);
      });
    }

    endlessFst($(".letter a img.firstAnim"));   
    endlessSnd($(".letter a img.secondAnim"));

Любая помощь будет высоко ценится.

1 Ответ

0 голосов
/ 27 ноября 2011

Вы можете просто прослушать событие зависания вашего img 

$("ul.slova li a img").hover(function() {
    //do animation
    $(this).animate({
        height: "50%"
    }, {
        queue: false,
        duration: 500
    });
}, function() {
    //undo animation
    $(this).animate({
        height: "100%"
    }, {
        queue: false,
        duration: 500
    });
});
...