jQuery hover - Whats wrong with my 'mouseout' script?
I am trying to make a fairly simple navigation for a number of pictures on a page. When the image is 'mouseover' I want the image itself to be 'greyed out' and panel to slide in from the right with some additional details.
This I managed to do with the following jQuery.
Now, what I want is, when the mouse leaves the image, to show the image clearly with slid panel slides backed out.
The strange thing is none of the jquery I tried to use (like fadeOut) are working at all. Here is my script:
html
<div id="开发者_StackOverflow中文版home_1" class="home_but">
<div class="home_overlay"></div>
<img src="images/home_pic_1.jpg" alt="" width="180" height="188" />
<div class="home_sub">here is some slide in text</div>
</div>
css
#home_1 {position:absolute; overflow:hidden; top:82px;}
.home_overlay {position:absolute; background:#fff; display:none;}
.home_sub {
width:150px;
height:50px;
background:blue;
position:absolute;
left: -1000px;
top: 70px;
}
javascript
<script type="text/javascript">
$(document).ready(function() {
$(".home_1").hover(
function () {
var img = $(this).children('img');
$(".home_overlay",this).height(img.height());
$(".home_overlay",this).width(img.width());
$(".home_overlay",this).fadeTo('slow', 0.5);
$(".home_sub",this).css('left',img.width());
$(".home_sub",this).css('top',(img.height()/2)-25);
varNewPos = img.width() - 150 +"px"
//alert(varNewPos);
$(".home_sub",this).animate({left:varNewPos});
},
function () {
$(".home_overlay",this).fadeOut(fast);
}
);
});
</script>
The mouseover bit works fine but on mouseout nothing happens. Then I found that using
$(".home_overlay",this).css('display','none');
worked. So did changing any other css propoerties but fadeOut and other jquery animations failed to fire.
What am I doing wrong?
cheers
dog
Make:
$(".home_overlay",this).fadeOut(fast);
be
$(".home_overlay",this).fadeOut('fast');
EDIT: Just noticed that $(".home_1")
should be $("#home_1")
also
精彩评论