Ajout de l’animation SlideUp et Slidedown à replaceWith dans jQuery

Je fais un site visortingne d’applications. J’ai une page avec des diapositives verticales pleine largeur. J’ai ajouté un téléphone fixe à l’écran. Je souhaite append une image sur le téléphone lorsque l’utilisateur la fait glisser à l’aide du bouton.

Quand il appuie sur le bouton, l’appareil retire l’image actuelle du téléphone et ajoute une nouvelle image de manière coulissante. J’ai trouvé un tutoriel sur codyhouse https://codyhouse.co/demo/app-introduction-template/index.html#cd-product-tour .

C’est un bon tutoriel mais pas capable de le faire verticalement. Mon code des diapositives est-ce

  My Appp
 Some content
L’affixe Bootstrap scintille lorsque l’affixe du bas est atteint et le défilement arrière
Liste non ordonnée – position de l’élément de la liste
Comment implémenter l’effet carrousel en utilisant jQuery / JavaScript
Les valeurs sur l’axe des Y disparaissent (masquer sous les étiquettes)
Liste non sortingée: charger des images ou des divs à la demande
 
  My Appp
 Some content
 
  My Appp
 Some content
 
  My Appp
 Some content

Je donne aux .slides la largeur et la hauteur 100%. Le curseur fonctionne très bien et le téléphone est parfaitement fixé à l’écran. Mais je veux que l’image du téléphone change sur chaque diapositive Et que l’effet soit le même que sur le lien, mais de manière verticale.

Mon code de bouton de navigation est-ce

Le téléphone du html est-ce

Le jQuery que j’utilise est-ce

 $(document).ready(function(){ $(".bullets").first().addClass('activeBullet'); var image = $("#1").attr('phone_image'); $('.cd-image-wrapper').prepend(''); setTimeout(function(){ $('.cd-image-wrapper img').slideDown("fast"); },1); }); The slider function is this function slider(n){ var ID = $(".activeDiv").attr("id"); var sid= ID.split("slide"); var new_id = sid[1]; if(new_id == n){ }else{ $(".slides").removeClass('activeDiv'); $("#slide"+n).addClass('activeDiv'); var top = $("#slide"+n).position().top; $("#mainbar").css({'top':-top}); $(".bullets").removeClass('activeBullet'); $("#bullet"+n).addClass('activeBullet'); $('.cd-image-wrapper img').fadeOut("slow", function(){ var images = $("#"+id).attr('phone_image'); var div = $('').hide(); $(this).replaceWith(div); $('.cd-image-wrapper img').fadeIn("slow"); }); } }

Comme vous pouvez le constater, je suis en mesure de modifier l’effet du téléphone en fondu enchaîné et en fondu enchaîné. Quelqu’un peut-il me dire comment le faire de manière glissante vers le bas et vers le bas?

Pas tout à fait comprendre ce que tu veux dire. Je ne peux pas append de commentaire, écrivez simplement ici.
Si vous voulez dire que vous voulez cliquez sur un bouton et la diapositive DIV. Vous pouvez simplement utiliser css animate comme animate.css

faites d’abord la div que vous voulez slideIn position: absolue top: 100%;
et la div que vous voulez slideOut position: absolue top: 0;

puis, lorsque vous cliquez sur le bouton, ajoutez la classe animée CSS à la diapositive.Dans le haut: 0, diapositive div haut: -100%; Cela fonctionnera et vous pouvez aussi append une autre animation, comme changer l’opacité.

Il sera facile d’utiliser css animate ici en utilisant les animations CSS

Vous pouvez utiliser les effets de diapositives de jQuery UI.

Vous avez ici un exemple de travail de l’effet : choisissez la diapositive dans la sélection et exécutez puis cliquez sur “Exécuter l’effet”.

Vous pouvez modifier la direction et la distance de l’effet, comme indiqué ici .