Jquery animate.css

Ответ 1

Просто используйте .animate() вместо .css() (с продолжительностью, если хотите), например:

$('#hfont1').hover(function() {
    $(this).animate({"color":"#efbe5c","font-size":"52pt"}, 1000);
}, function() {
    $(this).animate({"color":"#e8a010","font-size":"48pt"}, 1000);
});

Здесь вы можете протестировать его. Обратите внимание, что вам нужен либо плагин цвета jQuery, либо jQuery UI для анимирования цвета. В приведенном выше примере продолжительность составляет 1000 мс, вы можете изменить ее или просто оставить ее для стандартной продолжительности 400 мс.

Ответ 2

Вы можете выбрать чистое решение для CSS:

#hfont1 {
    transition: color 1s ease-in-out;
    -moz-transition: color 1s ease-in-out; /* FF 4 */
    -webkit-transition: color 1s ease-in-out; /* Safari & Chrome */
    -o-transition: color 1s ease-in-out; /* Opera */
}

Ответ 3

Пример с сайта jQuery анимации размера и шрифта, но вы можете легко изменить его в соответствии с вашими потребностями

$("#go").click(function(){
  $("#block").animate({ 
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em", 
    borderWidth: "10px"
  }, 1500 );

http://api.jquery.com/animate/

Ответ 4

Фактически вы можете использовать ".css" и применять css-переходы к затронутому div. Поэтому продолжайте использовать ".css" и добавьте стили ниже в таблицу стилей для "# hfont1". Поскольку ".css" допускает гораздо больше свойств, чем ".animate", это всегда мой предпочтительный метод.

#hfont1 {
    -webkit-transition: width 0.4s;
    transition: width 0.4s;
}

Ответ 5

Если вам нужно использовать CSS с функцией jQuery .animate(), вы можете использовать установку продолжительности.

$("#my_image").css({
    'left':'1000px',
    6000, ''
});

У нас есть свойство duration, равное 6000.

Это задает время в тысячной доли секунды: 6 секунд.

После продолжительности наше следующее свойство "easing" изменяет способ нашего CSS.

У нас установлено, что позиционирование установлено на абсолютное.

Абсолютная функция имеет два значения по умолчанию: "linear" и "swing".

В этом примере я использую линейный.

Он позволяет использовать ровный темп.

Другой "свинг" позволяет увеличить экспоненциальную скорость.

Есть куча действительно классных свойств для использования с анимацией, например, отскоком и т.д.

$(document).ready(function(){
    $("#my_image").css({
        'height': '100px',
        'width':'100px',
        'background-color':'#0000EE',
        'position':'absolute'
    });// property than value

    $("#my_image").animate({
        'left':'1000px'
    },6000, 'linear', function(){
        alert("Done Animating");
    });
});