2

我有一个“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"));

任何帮助将非常感激。

4

1 回答 1

0

你可以只听你的 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
    });
});
于 2011-11-26T21:39:59.650 回答