jQuery Girl
  1. jQuery Girl
  3. Transitions CSS3 dans jQuery .css ()
Intereting Posts
ajout d’une image de “chargement” à des images dynamics provenant de flickr comment puis-je conserver l’espace alloué dans le DOM lors de l’utilisation de l’affichage CSS: aucun JQuery $ (this) non accessible après POST ajax? Comment modifier l’atsortingbut STYLE d’un élément avec un ID connu à l’aide de JQuery Jquery Hover Effect ne fonctionne pas dans IE jQuery et streaming vidéo en direct avec webcam Comment déterminer quelle image apparaît en fonction de votre fuseau horaire ou de l’heure locale? PHP: Possible de cocher automatiquement toutes les données POSTed And Multiple? Directives AngularJS à masquer à zéro lorsque est chargé dans le DOM Itérer un script X fois Modifier les valeurs de la liste déroulante en fonction de l’entrée dans le champ de texte Les fonctions jQuery en queue ne s’exécutent pas après la première fois L’événement jQuery se déclenche deux fois Validation à distance JQuery (ne bloque pas la soumission de formulaire) Cliquer pour basculer avec jquery / javascript

Transitions CSS3 dans jQuery .css ()

Quand j’ajoute la ligne de transition dans mon code, jQuery est cassé. Comment puis-je le réparer? 

a(this).next().css({ left: c, transition: 'opacity 1s ease-in-out' });

J’essaye de mettre en place un fondu d’une division à l’autre dans un curseur

    Étape 1) Supprimez le point-virgule, c’est un object que vous créez … 

     a(this).next().css({ left : c, transition : 'opacity 1s ease-in-out'; });

    à 

     a(this).next().css({ left : c, transition : 'opacity 1s ease-in-out' });

    Étape 2) Préfixes de Vender … aucun navigateur n’utilise de transition car c’est la norme et c’est une fonctionnalité expérimentale même dans les navigateurs les plus récents: 

     a(this).next().css({ left : c, WebkitTransition : 'opacity 1s ease-in-out', MozTransition : 'opacity 1s ease-in-out', MsTransition : 'opacity 1s ease-in-out', OTransition : 'opacity 1s ease-in-out', transition : 'opacity 1s ease-in-out' });

    Voici une démo: http://jsfiddle.net/83FsJ/

    Étape 3) Meilleurs préfixes de vendeur … Au lieu d’append des tonnes de CSS inutiles aux éléments (qui seront simplement ignorés par le navigateur), vous pouvez utiliser jQuery pour choisir le préfixe de vendeur à utiliser: 

     $('a').on('click', function () { var myTransition = ($.browser.webkit) ? '-webkit-transition' : ($.browser.mozilla) ? '-moz-transition' : ($.browser.msie) ? '-ms-transition' : ($.browser.opera) ? '-o-transition' : 'transition', myCSSObj = { opacity : 1 }; myCSSObj[myTransition] = 'opacity 1s ease-in-out'; $(this).next().css(myCSSObj); });​

    Voici une démo: http://jsfiddle.net/83FsJ/1/

    Notez également que si vous spécifiez dans votre déclaration de transition que la propriété à animer est opacity , la définition d’une propriété de left ne sera pas animée.

    Votre code peut rapidement devenir compliqué lorsque vous utilisez des transitions CSS3. Je recommanderais d’utiliser un plugin tel que jQuery Transit qui gère la complexité des animations / transitions CSS3.

    De plus, le plugin utilise webkit-transform plutôt que webkit-transition, ce qui permet aux appareils mobiles d’utiliser l’accélération matérielle afin de donner à vos applications Web l’aspect et la convivialité natives de leurs animations.

    JS Fiddle Live Demo

    Javascript: 

     $("#startTransition").on("click", function() { if( $(".boxOne").is(":visible")) { $(".boxOne").transition({ x: '-100%', opacity: 0.1 }, function () { $(".boxOne").hide(); }); $(".boxTwo").css({ x: '100%' }); $(".boxTwo").show().transition({ x: '0%', opacity: 1.0 }); return; } $(".boxTwo").transition({ x: '-100%', opacity: 0.1 }, function () { $(".boxTwo").hide(); }); $(".boxOne").css({ x: '100%' }); $(".boxOne").show().transition({ x: '0%', opacity: 1.0 }); });

    La majeure partie du travail acharné pour obtenir la compatibilité inter-navigateurs est également effectué pour vous et fonctionne comme un charme sur les appareils mobiles.