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 に答える