Я хотел бы выполнить анимацию при загрузке страницы, но только тогда, когда атрибут css имеет значение чего-то. Анимация отлично работает без инструкции if. Вот мой код:
$(document).ready(function() {
if($("h1").css('font-size') == '36px'){
$("h1").animate({
"font-size" : "20px"
}, 750);
}
});
Из комментариев OP, казалось бы, что блуждающее правило в таблице стилей привело к тому, что размер шрифта был установлен в нечто иное, чем они ожидали.
Способ определения этого может быть легко выполнен с помощью вашего инспектора DOM вашего браузера. Как правило, вы можете щелкнуть элемент правой кнопкой мыши, нажать "Проверить" (или что-то в этом роде) и посмотреть, где это значение задано.
Вот несколько более конкретных способов использования:
Chrome - https://developers.google.com/chrome-developer-tools/docs/elements
Firefox - https://developer.mozilla.org/en-US/docs/DOM_Inspector/Introduction_to_DOM_Inspector
Internet Explorer - http://msdn.microsoft.com/library/gg589507(VS.85).aspx
Я думаю, вы пытаетесь анимировать элементы h1
с размером шрифта: 36 пикселей. Затем вам нужно отфильтровать эти элементы перед анимацией, как показано ниже:
$(document).ready(function () {
$("h1").filter(function () {
return ($(this).css('font-size') == "36px");
}).animate({
"font-size": "20px"
}, 750);
});
element.style[property]
будет включать только встроенные стили, тогда как $(element).css(property)
будет извлекать вычисленные стили, в том числе унаследованные от таблицы стилей.
if( $('h1').eq(0).css('<property>') ) {
...
}
.css()
возвращает значение свойства из первого элемента в коллекции. Ему, вероятно, нужно значение, отличное от 0
.
удалите "px" из кода при приравнивании размера шрифта:
if($("h1").css('font-size') == '36'){
$("h1").animate({
"font-size" : "20px"
}, 750);
em
. Я не уверен, хотя.