Блог

Я пытаюсь создать переход для своих элементов. Все примеры, которые я видел, используют :hover состояние. Однако мне нужно запустить переход, когда я нажимаю на ссылку.

Вот мой html

HTML

 <a id='fireme' href=''>FIRE</a>
<div id='test'> Test title 1</div>
 

CSS

 #test{
   background-color: red;
   height: 100px;
   width: 150px;
   transition: all 2s ease-out;
}

.newWidth{
   width: 250px;
}
 

JS

 $('#fireme').click(function(){
    $('#test').addClass('newWidth')
})
 

Однако, когда я нажимаю на ссылку, вообще ничего не происходит, и ширина по-прежнему остается такой же 150px

Кто-нибудь может мне помочь в этом? Спасибо!

Это из-за каскадного порядка правил стиля CSS.

В вашем случае правило стиля с идентификатором имеет более высокий приоритет, чем правило с классом.

Если вы будете использовать class в первую очередь, то вы получите то, что вам нужно.

В вашем HTML добавьте атрибут class

 <a id='fireme' href=''>FIRE</a>
<div id='test' class='test'> Test title 1</div>
 

И в CSS правила изменения

 .test{
   background-color: red;
   height: 100px;
   width: 150px;
   transition: all 2s ease-out;
}

.newWidth{
   width: 250px;
}
 

Посмотрите на это в действии http://jsfiddle.net/36BkX /

В противном случае вам необходимо повысить приоритет вашего правила CSS

 #test{
   background-color: red;
   height: 100px;
   width: 150px;
   transition: all 2s ease-out;
}

.newWidth{
   width: 250px !important;
}
 

И оставьте rest таким, какой он есть сейчас