Question

我试图让图片在悬停时滑出，然后在它们悬停到新链接时向后滑动，但我似乎无法让它工作。

这是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;
}

有人在这里看到我的问题吗？

Answer 1

首先，您无法使用z-index执行此动画，您应该创建一个具有css overflow:hidden属性的遮罩区域，并使用position隐藏动画对象。

第二件事，当对象的css具有right属性时，您无法为对象left设置动画，这将产生冲突并且无法工作。位置值必须准确。

我建议你使用jQuery绑定方法，它是可靠的，你可以使用多个事件，如：click，hover，mouseenter，mouseleave。

这是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;
}

jquery animate图像在ul列表后面滑出

1 个答案: