2

ホバー時に画像をスライドアウトさせ、新しいリンクにホバーしたらスライドバックさせようとしていますが、うまく動作しないようです。

JSはこちら

$(function() {
  $('#menu_seo > li').hover(
    function () {
        var $this = $(this);
        $('span',$this).stop().animate({
            'right':'70px'
        }).css({
            'zIndex':'10'
        });
    },
    function () {
        var $this = $(this);
        $('span',$this).stop().animate({
            'right':'-10px'
        }).css({
            'zIndex':'-1'
        });
    }
  );
});

そして私のCSS：

#menu_seo {
    position:relative;
}

ul#menu_seo li span {
    height:60px;
    width:15px;
    position:absolute;
    z-index:-1;
    cursor:pointer;
}

ul#menu_seo li span.arrowout1 {
    background-image:url(../arrow.png);
    top:8px;
    left:230px;
}

ここで私の問題を見た人はいますか？

4

1 に答える 1

2

まず、このアニメーションを で行うことはできません。cssプロパティでz-indexマスク領域を作成し、アニメーション オブジェクトを で非表示にする必要があります。overflow:hiddenposition

right次に、オブジェクトの css がプロパティを取得したときにオブジェクトをアニメーション化することはできませんleft。これにより、競合が発生し、機能しなくなります。位置の値は正確でなければなりません。

そして、jQuery bind メソッドを使用することをお勧めします。これはしっかりしていて、クリック、ホバー、マウスエンター、マウスリーブなどの複数のイベントを使用できます。

ここで jsFiddle が動作しています: http://jsfiddle.net/ATPG9/11/

jQuery:

$('#menu_seo li').bind({
    mouseenter: function() {
        $(this).children('span').stop().animate({'right':'70px'},200);
    },
    mouseleave: function() {
        $(this).children('span').stop().animate({'right':'-50px'},200);
    }
});

CSS:

#left_aside {
    overflow:hidden;
    float:left;
    width:230px;
    height:900px;
    background-color:#f2dada;
}

ul#menu_seo li span    {
    height:50px;
    width:50px;
    position:absolute;
    cursor:pointer;
    right:-50px;
}
于 2012-12-09T02:42:23.483 に答える