Fade in div on mouseover_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-03-06 01:20 出处：网络

This is a followup to my earlier question, Fade in/out js mouseover event. I am looking to incorporate a div mouseover effect on a small menu on my page. My previous question solved the issue, but I

This is a followup to my earlier question, Fade in/out js mouseover event.

I am looking to incorporate a div mouseover effect on a small menu on my page. My previous question solved the issue, but I had not incorporated the page layout into the function, which has now stopped it from working.

My basic code is:

<style type="text/css">
 .hidden{
    display:none;
}

#container {
   margin: 0%;
   padding: 0;
   width: 100%;
   background-color: #222222;
}
#left, #right {
   float: left;
   margin: 0% 0 0% 0%;
   padding: 0%;
   background-color: #000;
}
#right {
   float: right;
   margin: 0% 0% 0% 0;
}
.clear {
   height: 0;
   font-size: 1px;
   margin: 0;
   padding: 0;
   line-height: 0;
   clear: both;
}
</style>

<script type="text/javascript">
oldSelecte开发者_运维百科d = "home"
$ (document).ready(function(){
  $ ("#products img").mouseover(function(){
    $ (".description").stop(true, true);
    var newSelected = $(this).attr("alt");
    $ ("#" + oldSelected).fadeOut('normal',function(){
      $ ("#" + newSelected).fadeIn();
    });
    oldSelected = newSelected
  });
});
</script>

<body>
<div id="container" style="width: 974px; height: 200px;">

<div id="left" style="width: 200px; height: 200px;">
<div id="products" >

<img src="home.png" alt="home" />

<img src="services.png" alt="services" /> 

<img src="contact.png" alt="contact" /> 

</div>

</div>

<div id="right" style="width: 760px; height: 200px;">
<div class="description" id="home">
 .. content .. 
</div>

<div class="description" id="services">
 .. content .. 
</div>

<div class="description" id="contact">
 .. content .. 
</div>
</div>

</div>

I assume the mouseover effect has stopped working due to the products and description divs being relocated under new divs.

How do I go about adjusting the code to get the function working again under this layout? Would it work in a table layout instead?

You can try .slideDown and .slideUp

or .show() .hide() with duration