jQuery: плавно вставлять элемент?

Question

Я пытаюсь плавно вставить элемент с помощью 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');
      }
   );
});

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

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

jquery

1

TERO 27 Фев 2015 в 20:38

Answer 1

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

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

1

Community 23 Май 2017 в 11:56

Answer 2

Если вы хотите использовать здесь 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

Answer 3

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

2

Sarath Kn 27 Фев 2015 в 17:56

jQuery: плавно вставлять элемент?

3 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

jquery