Just use a 2nd function
for hover
, function(){
$("#coder").fadeTo(1000,1);
$("#my_pic").animate({right:'0px'}, 500);
}
题
I have below code:
JQUERY
$(document).ready(function() {
$("#developer").hover(function() {
$("#coder").fadeTo(1000,0.4);
$("#my_pic").animate({right:'110px'}, 1500);
});
});
It works but I want to restore defaults when user moves the mouse out of the area of #developer
.
CSS
#coder {
opacity: 1;
}
#my_pic {
position: relative;
}
HTML
<div id="developer" class="threecol">
<h1><span><</span>developer<span>></span></h1>
</div>
<div class="sixcol">
<img id="my_pic" src="images/me.png" />
</div>
<div id="coder" class="threecol last">
<h1><span><</span>coder<span>></span></h1>
</div>
解决方案
Just use a 2nd function
for hover
, function(){
$("#coder").fadeTo(1000,1);
$("#my_pic").animate({right:'0px'}, 500);
}
其他提示
Just append the other function taking care of the resetting after the first function inside 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);
});
});
$(document).ready(function() {
$("#developer").mouseout(function() {
$("#coder").fadeTo(1000,1);
$("#my_pic").animate({right:'110px'}, 1500);
});
});
Try this
$(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)
});
});