Сдвиньте вправо, используя .animate () width - PullRequest
Новая
       25

Сдвиньте вправо, используя .animate () width

1 голос
/ 12 марта 2012

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

У меня есть список социальных значков, которые я хотел бы, чтобы они скользили слева направо при наведении курсора на «Следуй за мной», а затем снова скрывались, когда парили.

Здесьтекущий код в JSFIDDLE ...

Если вы исправите ошибку, можете ли вы указать, где я допустил свои ошибки?Я все еще очень плохо знаком с этим.Большое спасибо!

Ответы [ 2 ]

3 голосов
/ 12 марта 2012

Это может быть не совсем то, что вы ищете, но довольно близко к тому, что вы просите.Я прекратил использовать UL и LI для иконок и просто использовал div и span, это можно изменить обратно, если потребуется.Основной проблемой является установка ширины на определенное значение (проценты не будут работать). 

$('.social-top').hide();

$('#social-grid').mouseenter(function() {
    $('.social-top').show();
    $('.social-top').stop().animate({
        width: 225
    }, 1000);
});

$('#social-grid').mouseleave(function() {
    $('.social-top').stop().animate({
        width: 0
    }, 1000, function() {
        $('.social-top').hide();
    });

});​

Это должно помочь вам в этом.Я использую show / hide, чтобы решить проблему с шириной 0, а элементы встроенного блока все еще отображаются.

Пример:

http://jsfiddle.net/infiniteloops/NqrKK/13/

0 голосов
/ 12 марта 2012

В вашем коде много логических недостатков:

  1. Изначально вы скрываете контейнер, поэтому закрываете все возможности запускаемого события
  2. Сам селектор является элементом li, и внутри него нет дочернего элемента <li>.
  3. И увеличение свойства width элемента не приводит к его левому краю. Вам нужно left, right или даже padding-left или margin-left

Ваша синтаксическая ошибка заключалась в том, что свойства были анимированы, а время было в тех же фигурных скобках. Правильный синтаксис 

$('element').animate(
   {
       //css properties
       left: "50"
   },
   5000 //The time in milliseconds or `fast`, `slow`
);

Используйте это 

$('.social-top li:not(.social-flyout)').hover(function() {
    $('.social-top').animate({
        right: 0
    },"fast"
    );
});

Я также дал position: absolute .social-top. Вот рабочая Демо здесь

...