Question

如何更改鼠标悬停效果，以便在进入鼠标时向上移动和淡入淡出，在鼠标移出时向下移动并淡出？

............................................... .................................................. .................................................. .................

它在ie7上不起作用，如何解决？

http://jsfiddle.net/peap/rhmj0808/

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
   $(function(){
     $('#menu').hover(over, out);
   });

    function over(event)
    {
                console.log(!$("#mask").is(":animated"));
        if(!$("#mask").is(":animated")){
         $('#mask').fadeIn(1000);
         $('#mask').css("display","block");
        }
    }

    function out(event)
    {
        console.log(!$("#mask").is(":animated"));
       if(!$("#mask").is(":animated")){
         $('#mask').fadeOut(1000);
       }
    } 
</script>

<style type="text/css">
#mask {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    z-index:0;
    display: none;
}

#menu{
    margin-top: 20px;
    position: absolute;
    z-index: 999;
}
</style>





<div id="mask">
    show hover
</div>

<img src="https://www.gravatar.com/avatar/1ead17c7ff6482d20e262c5c60c8fd1f?s=24&d=identicon&r=PG&f=1" id="menu" style=" margin-left: 28px; height: 62px;"/>

Answer 1

尝试使用animate

$('#mask').stop().animate({'opacity':1}, 1000)

DEMO

当鼠标进入鼠标时如何改变鼠标移动效果以及向下移动和淡出？

1 个答案: