JQuery .toggle ('Slide') zeigt meinen Inhalt nicht an

Question

Ich mache ein Social Media Links für eine Website, aber was passieren soll ist, sobald ein Benutzer über das Symbol gleitet, das sich auf der rechten Seite befindet das Symbol für Social Media/Link. Ich habe diesen Code JQuery, der steuert, was auf einem Benutzer geschieht schweben:

$("#share").hover(function() { 
     $("#social-icon-content").toggle('slide'); 
     $("#share a").animate({opacity:'1'}, 1); 
     $("#share-button").animate({opacity:'1'}, 1); 
    }); 

Wenn in der Konsole von Google Chrome sucht es zeigt, dass sich der Inhalt gleitet aber nachdem es nichts beendet Gleiten geschieht und es schaltet von display: none; zu display: block;.

Hier ist ein Link zu der JSFiddle, wenn Sie mehr sehen möchten.

Answer 1

Alles, was Sie tun müssen:

1. hinzufügen float: left Immobilien für #share-button und #social-icon-content
2. gesetzt width: 230px; display: block; für .wsite-social.wsite-social-default
3. Satz position: absolute Eigenschaft für #social-icon-content
4. hinzufügen display: inline-block; float: left; Eigenschaft für .wsite-social-item

Das ist es!

Fiddle

Answer 2

Es wird nichts angezeigt, da in die Links nichts eingefügt wird.

<a href="link">Text To be shown</a> 

Sie haben keinen Text s/w Link Tags eingegeben.

Wenn Sie das Hintergrundbild ohne Text angezeigt werden soll gibt es zwei Möglichkeiten:

1. Add Höhe & Breite der Spanne & make Anzeigeblock.

   span { Anzeige: Block; Höhe: 50px; Breite: 50px; }

2. Fügen Sie Padding zu der Spanne, die Hintergrundbild hat.

   span { Polsterung: 20px; }

Ein Arbeitsbeispiel mit wenigen Änderungen im Code: Working