Question

我的代码如下：

JQUERY

$(document).ready(function() {
    $("#developer").hover(function() {
        $("#coder").fadeTo(1000,0.4);
        $("#my_pic").animate({right:'110px'}, 1500);
    });
});

它可以工作，但我想在用户将鼠标移出#developer区域时恢复默认值。

CSS

#coder {
    opacity: 1;
}

#my_pic {
    position: relative;
}

HTML

<div id="developer" class="threecol">
    <h1><span>&lt;</span>developer<span>&gt;</span></h1>
</div>

<div class="sixcol">
    <img id="my_pic" src="images/me.png" />
</div>

<div id="coder" class="threecol last">
    <h1><span>&lt;</span>coder<span>&gt;</span></h1>
</div>

Answer 1

只需使用第二个function作为hover

, function(){
    $("#coder").fadeTo(1000,1);
    $("#my_pic").animate({right:'0px'}, 500);            
}

<强> FIDDLE

Answer 2

在hover内的第一个函数后，只需附加另一个函数来处理重置：

$(document).ready(function() {
    $("#developer").hover(
        function() {
            $("#coder").fadeTo(1000,0.4);
            $("#my_pic").animate({right:'110px'}, 1500);
        }, function() {
            $("#coder").fadeTo(1000,1);
            $("#my_pic").animate({right:'0'}, 1500);
        });
});

Answer 3

$(document).ready(function() {
$("#developer").mouseout(function() {
    $("#coder").fadeTo(1000,1);
    $("#my_pic").animate({right:'110px'}, 1500);
});
});

Answer 4

试试这个

$(document).ready(function() {   
    $("#developer").hover(function() {
        $("#coder").fadeTo(1000,0.4);
        $("#my_pic").animate({right:'110px'}, 1500);
    }, 
    function() {
        $("#coder").fadeTo(1000,1);
        $("#my_pic").animate({right:'0'}, 1500)
    });
});

使用jQuery hover恢复为默认值

4 个答案:

DEMO