Comment puis-je utiliser un paramètre de durée sur .animate s'il se trouve dans le rappel d'un effet .fadeOut?

J'essaye juste de fondre le contenu de section#secondary et une fois que le contenu a été passé, le parent (section#secondary) devrait animer 'fermer' dans une animation de curseur.Comment puis-je utiliser un paramètre de durée sur .animate s'il se trouve dans le rappel d'un effet .fadeOut?

Tout cela fonctionne mais les durées ne sont pas et je ne peux pas comprendre pourquoi.

Voici mon code:

HTML

<section id="secondary"> 
    <a href="#" class="slide_button">&laquo;</a> <!-- slide in/back button -->    
    <article> 

     <h1>photos</h1> 
     <div class="album_nav"><a href="#">photo 1 of 6</a> | <a href="#">create an album</a></div> 
     <div class="bar"> 
      <p class="section_title">current image title</p> 
     </div> 

     <section class="image"> 

      <div class="links"> 
       <a class="_back album_link" href="#">« from the album: james new toy</a> 
       <nav> 
        <a href="#" class="_back small_button">back</a> 
        <a href="#" class="_next small_button">next</a> 
       </nav> 
      </div> 

      <img src="http://localhost/~jannis/3781_doggie_wonderland/www/preview/static/images/sample-image-enlarged.jpg" width="418" height="280" alt="" /> 

     </section> 

    </article> 

    <footer> 
     <embed src="http://localhost/~jannis/3781_doggie_wonderland/www/preview/static/flash/secondary-footer.swf" wmode="transparent" width="495" height="115" type="application/x-shockwave-flash" /> 
    </footer> 

</section> <!-- close secondary -->

jQuery

// ============================= 
// = Close button (slide away) = 
// ============================= 
$('a.slide_button').click(function() { 
    $(this).closest('section#secondary').children('*').fadeOut('slow', function() { 
     $('section#secondary').animate({'width':'0'}, 3000); 
    }); 
});

Parce que le contenu de section#secondary est variable que j'utilise le sélecteur *.

Ce qui se passe est que le fadeOut utilise la vitesse slow appropriée, mais dès que les feux de rappel (une fois que le contenu est fané dehors) le section#secondary ANIME à width: 0 dans quelques millisecondes et non les 3000 ms (3 sec) J'ai réglé la durée de l'animation sur.

Toutes les idées seraient appréciées. PS: Je ne peux pas poster d'exemple à ce stade, mais puisqu'il s'agit plus d'une question de théorie de jQuery, je ne pense pas qu'un exemple soit nécessaire ici. -moi si je me trompe ..

Source

2010-05-11 Jannis

Ce n'est pas le comportement que je vois avec seulement ce code: http://jsfiddle.net/ eKeQ2/Something external/additional doit être activé sur votre page actuelle. Une vérification de '$ ('section # secondary: not (: animated)')' devrait être faite, puisque vous démarrez cette animation pour chaque enfant fané au lieu d'une seule fois. –

J'ai mis à jour ma réponse. Je suppose que c'est parce que vous n'avez aucune propriété de taille définie pour '# secondaire ', donc quand son contenu est supprimé, il se réduit automatiquement à rien. Ma nouvelle réponse (ci-dessous) définit sa taille de façon statique lorsque vous cliquez et juste avant l'animation. – user113716

Je crois au moins un problème potentiel est que le rappel de .fadeOut() (qui appelle ensuite la .animate()) peut exécuter plusieurs fois pour le nombre d'enfants élus .children('*'). Cela devrait probablement être retravaillé de telle sorte que le rappel ne soit exécuté qu'une seule fois.

Source

2010-05-11 03:05:04 awgy

Êtes-vous sûr que la largeur est passée à 0? en cours d'exécution de l'exemple suivant, je peux voir la largeur n'est pas 0 jusqu'à ce que le premier rappel est déclenché.

noter que le rappel est tiré une fois par le premier enfant de niveau, donc 3 fois dans cet échantillon

<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
     <script type="text/javascript"> 

      $(document).ready(function() { 
       $('a.slide_button').click(function() { 
        $('div#secondary').children().fadeOut('slow',function(){ 
         // this has scope of the html element 
         console.log(this); 
         console.log($(this).parent().width()); 
         $(this).parent().animate({'width':'0'}, 3000, function(){ 
          console.log($(this).width()); 
         }); 
        }); 
       }); 
      }); 

     </script> 
    </head> 
    <body> 

     <div id="secondary" style="background: red;">   
      <a href="#" class="slide_button">&laquo;</a> <!-- slide in/back button --> 
      <div> 

       <h1>photos</h1> 
       <div class="album_nav"><a href="#">photo 1 of 6</a> | <a href="#">create an album</a></div> 
       <div class="bar"> 
        <p class="section_title">current image title</p> 
       </div> 

       <div class="image"> 

        <div class="links"> 
         <a class="_back album_link" href="#">« from the album: james new toy</a> 
         <nav> 
          <a href="#" class="_back small_button">back</a> 
          <a href="#" class="_next small_button">next</a> 
         </nav> 
        </div> 

       </div> 

      </div> 

      <div> 
       <p>Footer</p> 
      </div> 

     </div> 

    </body> 
</html>

Source

2010-05-11 03:26:47 Jonathan

Comment puis-je utiliser un paramètre de durée sur .animate s'il se trouve dans le rappel d'un effet .fadeOut?

Répondre

Questions connexes