Opera est la méthode Animer jQuery d'une manière très étrange

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

  •  21-08-2019
  •  | 
  •  

Question

J'ai un menu déroulant. Sa hauteur est animée avec jQuery de 5px à 130px et vice versa.

Le menu a bien fonctionné alors qu'il était séparé élément (quand je développais), mais quand un autre éléments sont apparus Opera a fait une surprise:

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

Je marqué premier état que 1 et 2. deuxième que troisième état doit être la même que la première mais comme vous pouvez le voir a une « queue ».

UPD: code source

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

En fait, je l'ai résolu le problème en utilisant la magie de la rue (j'ai ajouté bordure blanche épaisse au fond du menu et maintenant « conte » est transparent). Mais je suis curieux de savoir quel est le problème et est-il une solution normale?

P.S. Un autre des éléments sont en fait divs vides avec des dimensions fixes et arrière-plan. Ma version Opera est 9.5 (je sais que c'est vieux, mais il est encore populaire parmi mon public).

P.P.S. Je viens de tester dans Opera 9.6 et le même bug est survenue lors.

Était-ce utile?

La solution

Je l'ai testé votre code sous IE 7, 8 et FF3 et il fonctionne très bien. Cependant, comme vous l'avez souligné, il y a en effet un bug lors de l'exécution de l'animation dans Opera. Je l'ai testé dans Opera 9.64 et obtenu les mêmes résultats que vous.

Je cherchai dans Google et dans les forums Opera et ne pouvait pas trouver aucune référence à ce bug particulier. Le plus proche que je pouvais trouver était le suivant:

Autres conseils

Vous pouvez mettre un div vide après <div class="cn bl">, et régler sa hauteur, par exemple, 50px (ou tout ce qui est suffisant), et sa marge inférieure à la même, mais la valeur négative (c'est -50px).

Non affilié à StackOverflow
scroll top