jQuery Girl
  1. jQuery Girl
  3. Comment masquer deux demi-images et afficher en survol une image complète avec une belle animation
Intereting Posts
avec firefox w / firebug, comment puis-je écrire du javascript dans le navigateur et utiliser les objects de fichier .js également? Que fait-on (fonction ($) {…}) (jQuery); faire / dire? Calculez le total à partir du nombre saisi et définissez-le sur le nombre Masquer les div si elles sont vides Case à cocher non cochée dans l’interface de dialog Comment permettre de redimensionner la hauteur du contenu du panneau à 0 Comment passer un object comme paramètre à la fonction de script Java sur onClick filtrer les résultats jquery en fonction du nom Faire quelque chose quand la page défile et avoir une certaine position Existe-t-il un type de solution de secours jQuery.browser? Puis-je retarder l’événement keyup pour jquery? jQuery treeview avec sortingable Comment déclencher un événement lors d’un appel de fonction arbitraire à l’aide de jQuery Bouton de suppression personnalisé dans jqGrid consumr un service Web .net en utilisant jquery

Comment masquer deux demi-images et afficher en survol une image complète avec une belle animation

Je ne sais pas comment faire ce qui suit avec jQuery. J’ai créé un héros de page avec deux sections (rouge / noir):

entrez la description de l'image ici

Ce que je veux, c’est que lorsque vous survolez le noir par exemple, il s’étendra au-dessus de la section rouge, de sorte que vous obtenez une boîte noire complète. Le même résultat que je veux bien sûr pour la section rouge:

entrez la description de l'image ici

Comment dois-je faire ce travail? 

var redSection = $('#red'); var blackSection = $('#black'); redSection.on('mouseover', function() { // Do something - overlay the other section });

Le balisage HTML est le suivant: 

 
 
  Urban Design  
 
  Photography

Et le CSS: 

 #hero { height: 480px; /* Default 500px */ padding: 0; position: relative; overflow: hidden; z-index: 1; background: url(../images/hero.jpg) no-repeat center; /* remove */ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #hero figure { position: absolute; top: 0; background: #FFF; } #hero img { width: 100%; max-width: none; position: relative; opacity: 0.4; }

Le résultat final, je veux remplacer la section rouge et noire avec des images. Attention à votre réponse! Je vous remercie.

Un mélange de CSS3 et de jQuery avec dégradation progressive devrait résoudre ce problème.

CSS 

 .page { position:fixed; width:100%; height:100%; overflow:hidden; } .black { background:#000; width:50%; height:100%; position:absolute; width:100%; left:-50%; transform:skew(30deg,0); transition:0.5s ease-in-out; z-index:1; } .red { background:#ff0000; width:50%; height:100%; position:absolute; width:100%; right:-50%; transform:skew(30deg,0); transition:0.5s ease-in-out; } .red:hover { transform:skew(0); transform:translate(-50%,0); } .black:hover { transform:skew(0); transform:translate(50%,0); } .inactive { z-index:-1 }

HTML

jQuery

JQuery est nécessaire pour résoudre un problème d’index z avec le dernier élément de l’arborescence DOM qui ruine l’animation fluide. 

 $(document).ready(function(){ $('.black').hover(function(){ $('.red').addClass('inactive'); },function(){ $('.red').removeClass('inactive'); }); $('.red').hover(function(){ $('.black').addClass('inactive'); },function(){ $('.black').removeClass('inactive'); }); });

Sachez que pour append du contenu aux deux div, vous devrez append un div interne et réinitialiser le biais avec ‘transform: skew (-30deg, 0);’. Les versions préfixées de transition et de transformation devront également être ajoutées.

Référence JSFiddle

Vous pouvez le faire en utilisant le path svg pour la forme, un pattern pour l’ image et un peu de JavaScript pour gérer les événements mouseover et mouseleave . 

 var hero = document.getElementById('hero'); var animLeft = document.getElementById('anim-left'); var animRight = document.getElementById('anim-right'); hero.addEventListener('mouseover', function(e) { (e.target.id == 'left') ? animRight.beginElement() : animLeft.beginElement(); }) hero.addEventListener('mouseleave', function(e) { (e.target.id == 'left') ? animRight.endElement() : animLeft.endElement(); })

Une solution simple avec CSS, sans peinture supplémentaire, etc.: 

 .parent { overflow: hidden; position: absolute; width: 90%; height: 90%; } .item { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; transition: transform 1s, z-index 1s; z-index: 1; overflow: hidden; } .item .image { transition: transform 1s; } .item:hover { transform: translate3d(0px, 0px, 0px); z-index: 100; } .item:hover .image { transform: skewX(0deg); } .red { background: #f00; transform: translate3d(-50%, 0px, 0px) skewX(-10deg); } .red .image { transform: skewX(10deg); } .black { background: #000; transform: translate3d(50%, 0px, 0px) skewX(-10deg); } .black img { transform: skewX(10deg); }