11528 sujets

JavaScript, DOM et API Web HTML5

Probleme "animate" JQuery

Bonjour à tous !

J'ai un soucis concernant une animation JQuery. J'ai l'habitude d'utiliser la fonction animate pour créer des petits effets sur mes pages web et j'essais de faire un diaporama, dit slider, avec un effet de zoom sur l'image. Cependant, l'animation ne fonctionne pas, l'image zoom d'un seul coup sans aucun animation.. Je galère pas mal depuis ce midi alors j'ai décidé de vous demander conseil Smiley smile

Voici mon code html simplifié, le problème est dans cette partie ou dans le fichier css, j'ai remplacé mon code JS par la simple animation, qui ne fonctionne pas même à ce stade ( Désolé si l'affichage n'est pas bon, je n'ai pas trouvé de type de code "HTML") : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
 
    <div class="homepage-presentation">
        <div class="images-slider">
            <div class="images-list">
                <img src="assets/img/DSCF0628.JPG" id="test-animation">
            </div>
        </div>
    </div>
 
    <script src="assets/js/jquery-3.5.1.min.js"></script>
 
    <script>
        $('#test-animation').animate({
            width: '140%'
        })
    </script>
 
</body>
</html>


Et voici mon fichier CSS :

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
 
html {
    width: 100vw;
    height: 100vh;
}
 
body {
    width: 100%;
    height: 100%;
}
 
.homepage-presentation {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FAF3DD;
}
 
.images-slider {
    background-color: red;
    height: 50%;
    width: 60%;
    box-sizing: border-box;
    position: relative;
    background-size: 100%;
    background-position: center;
}
 
.slider-canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border: 60px solid #FAF3DD;
}
 
.images-slider .images-list {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
 
.images-list img {
    width: 100%;
}

En espérant que quelqu'un puisse m'aider Smiley smile

Merci d'avance !
Modérateur
Bonjour,

Avec l'exemple que tu donnes, l'image a la même taille quand tu lui mets width: 100%; ou width: 140%; (ton image en fait ne s'affiche jamais à plus de 100% de sa largeur).

C'est pour ça que ça ne s'anime pas.

Si tu pars d'une image avec une width à 50% (au lieu de 100%), avec le reste du code identique au code que tu as indiqué, elle s'anime.

Amicalement,
Hum.. Je n'ai pas le même rendu sur mon navigateur (Chrome). En tout cas je ne pense pas que le problème viennent de la car j'ai trouvé une solution alternative grâce aux KeyFrames CSS qui joue aussi sur le "Width" et qui fonctionne parfaitement :


.scaleAnimation {
    animation-name: imageScaleAnimation;
    animation-duration: 12s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-fill-mode:forwards;
}
 
@keyframes imageScaleAnimation {
    0% {
        width: 100%;
    }
 
    100% {
        width: 140%;
    }
}


Cependant j'aurais bien aimé comprendre la cause de ce bug Smiley decu
Modérateur
Bonjour,

Le problème est que tu ne testes pas avec le code que tu nous as donné, mais avec un code légèrement différent ! Smiley biggrin

Dans ton premier code, ça marche avec jquery si tu mets par exemple simplement le code css ci-dessous (c'est le position:absolute qui permet à ton image de grandir au delà de 100%) :
.images-list img {
    width: 100%;
    position: absolute;
}


Amicalement,
Sujet clos
Aller à