jquery animate .css - PullRequest
Новая
       4

jquery animate .css

25 голосов
/ 03 декабря 2010

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

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

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

Ответы [ 5 ]

77 голосов
/ 03 декабря 2010

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

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

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

9 голосов
/ 17 апреля 2012

Вы можете выбрать чистое решение 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 */
}
0 голосов
/ 12 ноября 2015

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

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

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

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

По истечении этого срока наше следующее свойство "easing" изменит то, как происходит наш CSS.

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

Есть два значения по умолчанию для абсолютной функции: «линейный» и «свинг».

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

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

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

Существует множество действительно крутых свойств, которые можно использовать с анимацией, например отскок и т. Д. 

$(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");
    });
});
0 голосов
/ 03 марта 2015

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

#hfont1 {
    -webkit-transition: width 0.4s;
    transition: width 0.4s;
}
0 голосов
/ 03 декабря 2010

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

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

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

...