Opera behandelt jQuery belebte Methode in eine sehr seltsamen Art und Weise

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

  •  21-08-2019
  •  | 
  •  

Frage

Ich habe ein Dropdown-Menü. Seine Höhe ist mit jQuery von 5px zu 130px und vice versa animiert.

Das Menü hat gut funktioniert, während es Element getrennt wurde (wenn ich es war die Entwicklung), aber wenn ein anderes Element erschien Opera machte eine Überraschung:

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

I markiert ersten Zustand als 1 und das zweite als 2. Dritte Zustand sollte der gleiche wie erste sein, aber wie Sie sehen können sie einen „Schwanz“ hat.

UPD: Quellcode

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);
     }
  });
}

Eigentlich habe ich das Problem mit einigen Straßen Magie gelöst (Ich habe dicke weiße Grenze zum unteren Rand des Menüs und „Geschichte“ nun transparent ist). Aber ich bin gespannt, was das Problem ist, und gibt es eine normale Lösung?

P. S. Eine andere Elemente sind tatsächlich leer divs mit festen Abmessungen und Hintergrund. My Opera-Version ist 9.5 (Ich weiß, dass es ist alt, aber es ist immer noch beliebt bei meinem Publikum).

P.P.S. Ich habe gerade getestet es in Opera 9.6 und der gleiche Fehler aufgetreten.

War es hilfreich?

Lösung

I getestet Code unter IE 7, 8 und FF3 und es funktioniert gut. wie Sie haben jedoch bereits darauf hingewiesen, gibt es in der Tat ein Fehler, wenn die Animation in Opera läuft. Getestet habe ich es in Opera 9.64 und bekam die gleichen Ergebnisse wie Sie.

suchte ich in Google und in den Opera-Foren und keinen Hinweis auf diesen speziellen Fehler finden konnte. Die nächste, die ich finden konnte, war dies:

Andere Tipps

Sie können ein leeres div nach <div class="cn bl"> setzen, und legen Sie seine Höhe zu, sagen sie, 50px (oder was auch immer ist ausreichend), und sein unterer Rand auf den gleichen, aber negativen Wert (das heißt, -50px).

Nicht verbunden mit StackOverflow
scroll top