Перемещение от положения A до положения B медленно с анимацией

Question

Перемещение от положения A до положения B медленно с анимацией

Как это?

Соответствующие CSS:

#container:hover .inner {
    opacity: 0.8
}

HTML:

Нерелевантный CSS:

#container {
    width: 300px;
    padding: 30px;
    overflow: hidden
}

.inner {
    width: 40%;
    height: 250px;
    background: #ccc
}
#left {
    float: left
}
#right {
    float: right
}

Действительно неактуальный CSS:

#container {
    background: #fcecfc; /* old browsers */
    background: -moz-linear-gradient(top, #fcecfc 0%, #fba6e1 50%, #fd89d7 51%, #ff7cd8 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcecfc), color-stop(50%,#fba6e1), color-stop(51%,#fd89d7), color-stop(100%,#ff7cd8)); /* webkit */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcecfc', endColorstr='#ff7cd8',GradientType=0 ); /* ie */
}

27

jquery jquery-ui

задан Nakilon 2 November 2016 в 18:15

2 ответа

Вы можете анимировать его после завершения fadeIn, используя обратный вызов, как показано ниже:

$("#Friends").fadeIn('slow',function(){
  $(this).animate({'top': '-=30px'},'slow');
});

20

ответ дан 28 November 2019 в 04:16

Другие вопросы по тегам:

jquery jquery-ui

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

score 63 · Accepted Answer

Используйте jquery animate и дайте ему большую продолжительность, например, 2000

$("#Friends").animate({ 
        top: "-=30px",
      }, duration );

- = означает, что анимация будет относиться к текущей верхней позиции.

Примечание что элемент Friends должен иметь относительную позицию в css:

#Friends{position:relative;}