Home/ Questions/Q 8964819
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T16:40:30+00:00

I need your help. I looked in all tutorials but cannot figure out what

  • 0

I need your help. I looked in all tutorials but cannot figure out what I am doing wrong. I want the blue square to be faded out to 50% opacity. I tried already with fadeTo but for whatever resons it did not work. What do I need to do. Where is my mistake? Thank you so much!

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){

   $("#divA").mouseover(function(){$("#divB").fadeTo('slow', 0.5, function());
   $("#divA").mouseout(function(){$("#divB").fadeTo('slow', 1, function());
  });
</script>
<style type="text/css">
  #divA { background:red; width:25px; height:25px; margin:50px }
  #divB { background:blue; width:200px; height:200px }
</style>
</head>
<body>
Hover over the red square to fadeout the blue one to 50% opacity.<br>
The blue square fades back in when your cursor leaves the red one.
<div id="divA"></div>
<div id="divB"></div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There were a few syntax errors in the javascript. It was missing closing braces and closing parens. Also there was no need for the empty callback, which was missing opening and closing braces.

    Try:

      $(document).ready(function(){

      $("#divA").mouseover(function(){
          $("#divB").fadeTo('slow', 0.5);
      });

      $("#divA").mouseout(function(){
          $("#divB").fadeTo('slow', 1);
      });
  });

    Example: http://jsfiddle.net/XnBQ6/

    • 0