Почему в этой анимации Jquery происходит случайный скачок?

Question

Почему в этой анимации Jquery происходит случайный скачок?

0

HTML:

<div id = 'text'>Text</div>

ЯШ:

$('#text').on('click', function() {
    $('#text').animate({'top':'-300px'}, 3000);
});

CSS:

#text {
    position:absolute;
    top:calc(25% + 125px);
    left:calc(50% - 285px);

    text-align: left;
    height:50px;
    width:500px;
    background:red;
    color:#aaa;
}

Почему он прыгает на вершину, а затем оживляется? Кроме того, почему текст не появляется?

mango 17 май 2014, в 00:56

Источник

6

У меня отлично работает. Текст может не отображаться, потому что вы слишком сильно изменили размер окна.
Joeytje50 16 май 2014, в 22:14
1

Я не вижу прыжка. и я вижу текст
Kevin B 16 май 2014, в 22:15
0

Отойди, крутись 3 раза, прыгни на правую ногу, вернись к клавиатуре и нажми control-F5. Просто шучу. Думаю, я попытаюсь осветить то, что, вероятно, для тебя является кошмаром. Надеюсь, вы найдете решение.
John Hartsock 16 май 2014, в 22:20
0

Это не работает для меня в сафари.
mango 16 май 2014, в 22:51
0

использовать переходы css3 быстро и легко, но это не кросс-браузерное решение, в мире все еще есть много проектов, которым необходимо поддерживать IE 6,7,8, что не очень хорошо. Я подумал о том, что браузер morden неоправданно использует переходы css3, используя javascript для восстановления, если переходы css3 не поддерживаются. в основном (IE 6,7,8)
Sean 24 июль 2014, в 02:06

Показать ещё 3 комментария

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

У меня отлично работает. Текст может не отображаться, потому что вы слишком сильно изменили размер окна.
Отойди, крутись 3 раза, прыгни на правую ногу, вернись к клавиатуре и нажми control-F5. Просто шучу. Думаю, я попытаюсь осветить то, что, вероятно, для тебя является кошмаром. Надеюсь, вы найдете решение.
Это не работает для меня в сафари.
использовать переходы css3 быстро и легко, но это не кросс-браузерное решение, в мире все еще есть много проектов, которым необходимо поддерживать IE 6,7,8, что не очень хорошо. Я подумал о том, что браузер morden неоправданно использует переходы css3, используя javascript для восстановления, если переходы css3 не поддерживаются. в основном (IE 6,7,8)

NEOLPAR · Accepted Answer · 2014-05-16T20-18-00.000Z

Я бы рекомендовал использовать переходы CSS3.

CSS

#text {
    position:absolute;
    top:calc(25% + 125px);
    left:calc(50% - 285px);

    text-align: left;
    height:50px;
    width:500px;
    background:red;
    color:#aaa;
    -webkit-transition:all 3.0s ease-in-out;
    -moz-transition:all 3.0s ease-in-out;
    -o-transition:all 3.0s ease-in-out;
    transition:all 3.0s ease-in-out; 
}

JS

$('#text').on('click', function() {
    $('#text').css('top','-300px');
});

Здесь вы можете увидеть пример