3
votes

Changement css animé (jQuery)

J'essayais d'appliquer le plugin d'accélération jQuery à .css et .animate, mais cela ne fonctionne pas, je ne sais pas pourquoi, car normalement cela fonctionne. Exemple de code:

$('#img').hover(function() {
    $(this).animate({"border-radius":"5px"}, 0, "easeOutBounce");
}, function() {
    $(this).animate({"border-radius":"75px"}, 0, "easeOutBounce");
});

Donc, fondamentalement .animate (au lieu de .css pour éviter les problèmes) mais je veux également définir la durée de l'animation et travailler "easOutBounce" ou certains autres effets.

Le rayon de la bordure est maintenant animé sur : hover , mais sans minutage d'animation.

Je ne peux pas le faire en css, et jQuery ne fonctionne pas, y a-t-il un moyen de résoudre ce problème?

Merci, Oliver

jquery css animation easing easing-functions

0 commentaires

4 Réponses :

2
votes

Je pense que la syntaxe que vous utilisez dans votre animation n'est pas correcte. Vous devez également définir une durée> 0 si vous voulez voir quelque chose.

N'hésitez pas à modifier la partie easing avec votre propre plugin.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

<img id="img" src="https://i.stack.imgur.com/Qk0jX.jpg">

#img {
  border-radius: 5px;
}

$('#img').hover(
  function() {
    $(this).animate({
      borderRadius: 75
    }, 300, 'easeOutBounce');
  },
  function() {
    $(this).animate({
      borderRadius: 5
    }, 300, 'easeOutBounce');
  }
);

3 commentaires

Merci, mais cela ne fonctionne pas avec effet .. par exemple, je veux easyOutBounce, ( gsgd.co. uk / sandbox / jquery / easing ) et cela ne fonctionne pas: /.

Est-il possible de faire cet effet de synchronisation .. dans jquery? Si le plugin ne fonctionne pas avec .animate (idk pourquoi)

Bonjour @Oliver, j'ai changé l'accélération en easyOutBounce , vous pouvez vérifier mon extrait de code.

-2
votes

J'ai essayé un échantillon qui fonctionne tel quel.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div class="block"></div>
<div class="block"></div>

$('div.block').hover(function(){
            $(this).animate({ borderRadius: '70px' }, 600, 'easeInBounce');
        },function(){
            $(this).animate({ borderRadius: '0px' }, 600, 'easeOutBounce');
        });

1 commentaires

Où est la différence avec la réponse existante?

1
votes

Cette fonction devrait fonctionner:

$('#img').hover(
  function() {
    $(this).animate({
      borderRadius: 75
    }, 300, 'easeOutBounce');
  },
  function() {
    $(this).animate({
      borderRadius: 5
    }, 300, 'easeOutBounce');
  }
);

0 commentaires

0
votes

essayez de modifier les effets de synchronisation comme faciliter le rebond

changez-le en facilité dans

0 commentaires