Jquery анимировать .css

Question

У меня есть сценарий:

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

Как я могу оживить его или замедлить его, так что он не будет мгновенным?

Answer 1

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

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

You can test it here. Обратите внимание, что вам нужно либо jQuery color plugin, либо jQuery UI для анимирования цвета. В вышесказанном продолжительность составляет 1000 мс, вы можете изменить ее или просто оставить ее по умолчанию на 400 мс.

Answer 2

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

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

Answer 3

Вы можете выбрать чистый 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 */ 
} 

Answer 4

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

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

Answer 5

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

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

У нас есть множество продолжительность собственности на 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"); 
    }); 
});