开发者

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜