Я пытаюсь плавно вставить элемент с помощью jquery.

Но по какой-то причине элемент на самом деле не скользит, и эффект совсем не плавный!

Просмотрите jsfiddle здесь: http://jsfiddle.net/q7o0p488/1/

И это мой код jquery:

$(function() {
    $('.mypro').hover(function() {
        $(this).children('.overlay').fadeIn('slow');
        $(this).children('.overlayBtns').slideToggle();

      },
      function(){
        $('.overlay').fadeOut();
        $('.overlayBtns').fadeOut('slow');
      }
   );
});

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

Любая помощь будет оценена.

1
TERO 27 Фев 2015 в 20:38

3 ответа

Лучший ответ

Вы можете сделать это с помощью css3, если это имеет смысл для вашего приложения. Пример этого был дан здесь.

CSS 3 вставка из левого перехода

1
Community 23 Май 2017 в 11:56

Если вы хотите использовать здесь Slidetoggle()

Добавить slow.

Как это

$(function() {
    $('.mypro').hover(function() {
        $(this).children('.overlay').fadeIn('slow');
        $(this).children('.overlayBtns').slideToggle('slow');

      },
      function(){
        $('.overlay').fadeOut();
        $('.overlayBtns').fadeOut('slow');
      }
   );
});

Проверьте здесь http://jsfiddle.net/q7o0p488/2/

1
M.chaudhry 27 Фев 2015 в 17:53

Попробуйте отрегулировать продолжительность slideToggle. http://jsfiddle.net/oehzLsvc/

2
Sarath Kn 27 Фев 2015 в 17:56