Opera handles jQuery's animate method in a very strange way

StackOverflow https://stackoverflow.com/questions/846334

  •  21-08-2019
  •  | 
  •  

Question

I have a dropdown menu. Its height is animated with jQuery from 5px to 130px and vice versa.

The menu worked fine while it was separated element (when I was developing it) but when another elements appeared Opera made a surprise:

alt text http://img12.imageshack.us/img12/9366/menusy.png

I marked first state as 1 and second as 2. Third state should be the same as first but as you can see it has a "tail".

UPD: source code

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script type="text/javascript" src="js/jquery.js">
    </script>
    <script type="text/javascript" src="js/script.js">
    </script>
    <script type="text/javascript">
      $(function(){
        init();
      });
    </script>
    <link rel="stylesheet" href="css/styles.css"/>
</head>
<body>
  <div id="side" class="side_outer"> 
        <div class="cn tr"> </div>
        <div class="cn tl"> </div>

        <div class="auth">
          <span class="auth_entr">Click me</span> 
          <div class="auth_fields"> 

          </div>
          <div id="auth_separator"> </div>
        </div>
        <div class="side_inner">
            <div class="cn tr"> </div>
            <div class="cn tl"> </div>
                <div class="side_content">
                    Some content
                </div>   
            <div class="cn br"> </div>
            <div class="cn bl"> </div>
        </div>
        <div class="cn br"> </div>
        <div class="cn bl"> </div>  
  </div>
  <div id="header"> Header</div>
  <div id="central"> Center</div>
</body>
</html>

css:

#header {
  background: red;
  height: 100px;
  margin: 30px 330px 20px 20px;

}

#central {
  background: green;
  height: 150px;
  margin: 20px 330px 20px 20px;
}

#side {
  margin-right: 3%;
  margin-left: 10px;
  margin-top: 30px;
  min-width: 200px;
  float: right;
}

.side_outer {
  padding: 0 10px;
  background: #f2f2cc;
  width: 22%;
  border-bottom-style: dashed;
  border-bottom-width: 2px;
  border-bottom-color: black;
}

.side_inner {
    position:relative;
    overflow:hidden;
    padding: 0 10px;
    background: #accbfa;  
}

.side_outer .cn {
  position: relative;
  width: 20px;
  height: 20px;
}

.side_outer .cn.tr, .side_outer .cn.br {
  float: right;
  left: 10px;
}

.side_outer .cn.tl, .side_outer .cn.bl {
  left: -10px;
}

.auth {
  overflow: hidden;
}

.auth_entr {
  position: relative;
  top: 5px;
  margin-left: 17px;
  padding:  0 5px;
  color:  #1e5ebe;
  cursor: pointer;
}

.auth_fields {
  overflow: hidden;
  height: 5px;
  margin-top: 5px;
}


#auth_separator {
  height: 6px;
  font-size: 2px;
}

.side_content {
  height: 100px;
  padding: 5px 15px;
}

javascript:

var auth_state = 1;

function init () {
  $('span.auth_entr').click (function (){
     auth_state = (auth_state + 1) % 2;
     if (auth_state == 1) {
          $('div.auth_fields').animate({height: '5px'},  1000);
     } else {
          $('div.auth_fields').animate({height: '132px'}, 1000);
     }
  });
}

Actually I've solved the problem using some street magic (I added thick white border to the bottom of the menu and now "tale" is transparent). But I'm curious what is the problem and is there any normal solution?

P.S. Another elements are actually empty divs with fixed dimensions and background. My Opera version is 9.5 (I know that it's old but it's still popular among my audience).

P.P.S. I've just tested it in Opera 9.6 and the same bug occured.

Was it helpful?

Solution

I tested your code under IE 7, 8 and FF3 and it works fine. However, as you have already pointed out, there's indeed a bug when running the animation in Opera. I tested it in Opera 9.64 and got the same results as you.

I searched in Google and in the Opera forums and could not find any reference to this particular bug. The closest that I could find was this: jquery-smooth-scroll-bugs.

You may have to create a ticket to report this bug with Opera.

OTHER TIPS

You can put an empty div after <div class="cn bl">, and set its height to, say, 50px (or whatever is sufficient), and its bottom margin to the same, but negative value (that is, -50px).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top