clearQueue?

duffJohn
Javascript

Salut tout le monde,
je suis confronté a un soucis en jquery.
J'ai plusieurs div contenant des photo et au survol de celles-ci, j'ai mis en place deux petite action JQuery, changement d'opacité, et apparition en slideDown d'un bandeau.
Comme ceci:

<script>
    $(document).ready(function() {

                $("div.01, div.02, div.03, div.04, div.05").mouseenter(function(){ 
                    $('img:first',this).animate({"opacity":"1"});
                    $(this).children('.bando').slideDown('slow');
                }).mouseleave(function(){ 
                    $(this).children('img').animate({"opacity":"0.3"});
                    $(this).children('.bando').slideUp();
                });

    });
</script>

Malheureusement, lorsque je survole plusieurs div en quelques secondes, toutes les actions s'enchaine...
J'aimerai que seule, la derniere action s'execute...
Est ce que cela est faisable?

J'ai regardé la fonction clearQueue, mais je ne pense pas que ce soit applicable a mon code...

Merci d'avance.

8 réponses

Gregory
Réponse acceptée

Essayes avec ça

$(this).children('img').stop(true,true).animate({"opacity":"0.3"});

ou 

$(this).children('img').stop(true,false).animate({"opacity":"0.3"});

tout dépend de ce que tu souhaites

Sinon essayes aussi avec ça 

<script>
    $(document).ready(function() {

      $("div.01, div.02, div.03, div.04, div.05").hover(function(){ 
         $('img:first',this).stop(true,true).animate({"opacity":"1"});
         $(this).children('.bando').slideDown('slow');
      },function(){ 
         $(this).children('img').stop(true,true).animate({"opacity":"0.3"});
         $(this).children('.bando').slideUp();
      });   
    });
</script>
Gregory
Réponse acceptée

Arff je pas vu le slideDow et je pense que le stop faut le mettre dessus ;)

Gregory

Avant la fonction animate tu peux mettre un stop() genre :

$(this).children('img').stop().animate({"opacity":"0.3"});

De même pour la première.

duffJohn
Auteur

Ça ne fonctionne pas Gregory désolé mais merci quand même ;)

duffJohn
Auteur

:( toujours pas... aucune de ses 3 solutions.

Gregory

Est ce que tu peux mettre en ligne l'exemple?

duffJohn
Auteur

malheureusement non, il est sur un serveur avec mdp, car je ne suis pas le seul sur ce projet... et je ne peu pas mettre les pass en ligne...
Mais je peux filer le code complet de la page pour peu etre comprendre un peu plus le soucis.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<div class="firstPart">
    <div class="span6 bgWhite photoBox">
        <div class="marges">
            <div><?php echo $page'content']; ?></div>
        </div>
    </div>
    <div class="span6 bgBlack photoBox pointer 01">
        <?php echo $this->Html->image('album01.jpg',array('alt'=>"album01")); ?>
        <div class="bando">Prince Alla portraits</div>
    </div>
    <div class="span6 bgBlack photoBox pointer 02">
        <?php echo $this->Html->image('album02.jpg',array('alt'=>"album02")); ?>
        <div class="bando 02">Prince Alla portraits</div>
    </div>
    <div class="span6 bgBlack photoBox pointer 03">
        <?php echo $this->Html->image('album03.jpg',array('alt'=>"album03")); ?>
        <div class="bando">Prince Alla portraits</div>
    </div>
    <div class="span6 bgBlack photoBox pointer 04">
        <?php echo $this->Html->image('album04.jpg',array('alt'=>"album04")); ?>
        <div class="bando">Prince Alla portraits</div>
    </div>
    <div class="span6 bgBlack photoBox pointer 05">
        <?php echo $this->Html->image('album05.jpg',array('alt'=>"album05")); ?>
        <div class="bando">Prince Alla portraits</div>
    </div>
</div>
<script>
    $(document).ready(function() {

                $("div.01, div.02, div.03, div.04, div.05").mouseenter(function(){ 
                $(this).children('img').stop(true,true).animate({"opacity":"0.3"});
                    $(this).children('img').stop(true,true).animate({"opacity":"1"});
                    $(this).children('.bando').slideDown('slow');
                }).mouseleave(function(){ 
                $(this).children('img').stop(true,true).animate({"opacity":"0.3"});
                    $(this).children('.bando').slideUp();
                });

    });
</script>
duffJohn
Auteur

Super ça fonctionne :)