JQuery .toggle ('Slide') не отображает мой контент

Question

Я создаю ссылки в социальных сетях для веб-сайта, но то, что должно было произойти, - это когда пользователь наводит курсор мыши над значком, с правой стороны значок Social Media/Link. я это JQuery код, который контролирует то, что происходит на пользователей парить:

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

При поиске в консоли Google Chrome это показывает, что катится содержание, но после того, как он заканчивает скольжение ничего не происходит, и он переключается с display: none; до display: block;.

Вот ссылка на JSFiddle, если вы хотите увидеть больше.

Answer 1

Все, что вам нужно сделать:

1. добавить float: left недвижимость для #share-button и #social-icon-content
2. набор width: 230px; display: block; для .wsite-social.wsite-social-default
3. комплект position: absolute недвижимости для #social-icon-content
4. добавить display: inline-block; float: left; недвижимости для .wsite-social-item

Вот оно!

Fiddle

Answer 2

Ничего не отображается, поскольку в ссылках ничего не помещается.

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

Вы не указали ни одного текстового ч/б ссылки.

Если вы хотите отобразить фоновое изображение без какого-либо текста, есть два варианта:

1. Добавить высота & ширина в блок дисплея делает диапазон &.

   span { дисплей: блок; высота: 50px; ширина: 50 пикселей; }

2. Добавить дополнение к пролету, который имеет фоновое изображение.

   span { обивка: 20px; }

рабочий пример с некоторыми изменениями в вашем коде: Working