J'ai essayé d'avoir un effet où:
Voici ce que j'ai essayé jusqu'à présent:
(puisqu'il prendra beaucoup de temps, remplacé les icônes avec des symboles de clavier aléatoires)
http://jsfiddle.net/h9ex9/ C'est l'effet que j'essaie d'accomplir. Texte et largeur de commentaire glisse de la droite. Mais il y a d'autres icônes à part celui-ci. J'espère que c'est également possible de faire glisser ceux lorsque la largeur de l'arrière-plan se développe. est-ce possible, si oui, comment? 
4 Réponses :
Vous pouvez le faire en utilisant la fonction JQuery Hover () Voici un code de démo:
<script type="text/javascript">
$(".icon").hover(function(){ $(".text").show("slide", { direction: "left" }, 1000);}, function(){ $(".text").show("slide", { direction: "right" }, 1000);});
</script>
Je pense que c'est ce que vous recherchez: HTML:
#comment-button{
background-color: #ababab;
width: 11px;
border-radius: 15px;
height: 15px;
padding: 10px;
color: red;
}
#comment-button-text{
width: 0px;
display: block;
overflow: hidden;
position: absolute;
top: 16px;
left: 31px;
color: #8a8a8a;
}
Nice sauf qu'il est possible d'élargir la largeur sans pixels, par exemple: permet de dire qu'il y avait plus de contenu alors "commentaires". Et ne peut pas prédire la largeur.
Voici votre démo avec quelques travaux effectués sur le CSS. C'est un peu long enroulé mais fait le travail sans JavaScript en utilisant uniquement des transitions CSS pour l'animation. Pour une raison quelconque, il a animé mieux en utilisant Lors de la mise en œuvre correctement, vous pouvez utiliser un élément d'emballage supplémentaire pour animer au lieu du max-largeur au lieu de largeur mais je ne sais pas pourquoi.
Démo: http://jsfiddle.net/marcel/h9ex9/ 1 /
car vous aurez plusieurs éléments dans le " Tags "bouton par exemple.
Merci, exactement ce que je voulais. Un problème. La balise pourrait réellement avoir une quantité illimitée. Ether 3 voire 15. Quelle serait la meilleure façon de montrer toutes ces tags sans les cacher, comme s'ils le font maintenant lorsqu'ils sont planifiés?
Jetez un coup d'œil au code que j'ai posté :)