jquery animate/mouseover/mouseout не работает

Question

Когда я наводил элемент над классом «весна», я хочу, чтобы он перешел на другой цвет. Я делаю это с помощью jQuery, но я не могу заставить его работать. Кто-нибудь сможет пролить свет на это для меня? Вот скрипку за то, что я до сих пор ...

jsfiddle

Спасибо заранее!

$('.spring').mouseover(function() { 
    $('.spring').animate({ 
     'backgroundColor' : '#CCCCCC' 
    }).mouseout(function() { 
    $('.spring').animate({ 
     'backgroundColor' : '#000000' 
    }); 
}); 

Это код, который я до сих пор использовал для jQuery!

Answer 1

Попробуйте использовать hover для этого:

$('.spring').hover(function() { 
    $('.spring').animate({ 
     'backgroundColor' : '#CCCCCC' 
    }); 
}, function() { 
    $('.spring').animate({ 
     'backgroundColor' : '#000000' 
    }); 
}); 

Answer 2

$(document).ready(function() { 
    $('.spring').hover(function() { 
     $('.spring').animate($(this).css({ 
      'background': '#CCCCCC' 
     })); 
    }, function() { 
     $('.spring').animate($(this).css({ 
      'background': '#000000' 
     })); 
    }); 
}); 

http://jsfiddle.net/3f4RQ/5/

Answer 3

Я изменил ваш Fiddle

http://jsfiddle.net/3f4RQ/3/

$(document).ready(function() { 

    $('.spring').hover(function() { 
     $('.spring').animate({ 
      'backgroundColor': '#CCCCCC' 
     }) 
    }, 

    function() { 
     $('.spring').animate({ 
      'backgroundColor': '#000000' 
     }); 
    }); 
}); 

Если вам все еще нужны события mouseover и mouseout, вы можете использовать приведенный ниже фрагмент. $ (документ) .ready (функция() {

$('.spring').mouseover(function() { 
     $('.spring').animate({ 
      'backgroundColor': '#CCCCCC' 
     }) 
    }) 
.mouseout(
    function() { 
     $('.spring').animate({ 
      'backgroundColor': '#000000' 
     }); 
    }); 
}); 

Кроме того, вы будете нуждаться в Jquery UI для анимации BackgroundColor свойства.

Пожалуйста, отметьте, как ответ, если это помогло.

Answer 4

Если я правильно понимаю , вы хотите, чтобы ящик был красным до тех пор, пока кто-то не зависает, а затем станет серым на паре, а затем станет черным, а не красным.

Я предпочитаю, чтобы CSS выполнял как можно большую часть работы, поскольку он часто обрабатывается быстрее и легче для работы, особенно для чего-то такого простого. В большинстве случаев анимация CSS может заменить функцию анимации jQuery. jQuery требуется только для установки флага, в котором был установлен флажок, а затем после этого не требуется.

JQuery:

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

$(document).ready(function() { 

    $('.spring').on('mouseover', function() { 
     $('.spring') 
     .addClass('touched') 
     .off('mouseover'); 
    }); 

}); 

CSS:

Я считаю, что анимация являются более гладкая и позволяют более точно контролировать с помощью CSS переходов, а не JQuery одушевленного. Мы устанавливаем состояние зависания в серый цвет, а класс .hovered - черный, и все в CSS.

.spring { 
    background: red; 
    width: 100px; 
    height: 30px; 
    transition: background 0.5s ease 
} 
.spring:hover, .spring.touched:hover { 
    background: #ccc; 
} 
.spring.touched { 
    background: #000; 
} 

Это дает легкий контроль над каждым аспектом внешнего вида, без необходимости добавлять громоздкий код CSS в JQuery.

See the Fiddle here

только один глюк-прежде чем использовать его, проверьте таблицу для CSS поддержки анимации: http://caniuse.com/css-animation. Обычно я рассматриваю переходы как «приятные, чтобы иметь», а не существенные, поэтому я не слишком волнуюсь, что IE9 и ниже не будут видеть переходы. Они по-прежнему прекрасно меняют цветные изменения, так что функциональных возможностей действительно нет. Преимущество в том, что у вас нет всего этого мусора в javascript.