WebKit Transitions JQuery AddClass ничего не делает - PullRequest
Новая
       7

WebKit Transitions JQuery AddClass ничего не делает

4 голосов
/ 15 июня 2011

JQuery addclass вообще не добавляет класс, и поэтому переходы веб-набора не работают. В функции ниже первый класс add работает, а второй нет. Что происходит.

Функция 

function closecont() {
    $('#contpanel').addClass('contentclosed');
    $('#slideback').addClass('slideback');
}

CSS 

.gallery .content #slideback {
    position:absolute;
    background:url(images/ui/cont.png) center top;
    height:44px;
    width:24px;
    top:340px;
    left:254px;
    overflow:hidden;
    opacity:0.0;filter:alpha(opacity=0);
    -webkit-transition-property:opacity;
    -webkit-transition-duration:600ms;
}
.slideback {
    opacity:1.0;filter:alpha(opacity=100);
    -webkit-transition-property:opacity;
    -webkit-transition-duration:600ms;
}

Контент закрыт работает отлично. .slideback нет. Вот очень похожая скрипка, которую я сделал. http://jsfiddle.net/4WmJz/15/

Любые идеи.

Marvelous

Ответы [ 2 ]

5 голосов
/ 15 июня 2011

Вы забыли добавить флаги !important к своим стилям, но использовали их в первой половине своей скрипки. Вот почему он работал с первым элементом.

По умолчанию правила CSS применяются в определенном порядке . Более конкретные селекторы переопределяют более общие, поэтому, если вы добавляете класс (общий) к элементу, набор правил CSS для идентификатора элемента (определенный) будет иметь приоритет. 

.slideback {
    opacity:1.0 !important;filter:alpha(opacity=100) !important;
    -webkit-transition-property:opacity !important;
    -webkit-transition-duration:600ms !important;
}

Ваша фиксированная скрипка: http://jsfiddle.net/4WmJz/16/

0 голосов
/ 15 июня 2011

вместо 

#reviews #test {
opacity:0.0;filter:alpha(opacity=0);
-webkit-transition-property:opacity, filter;
-webkit-transition-duration:600ms ,600ms;
 }

Сделайте это: 

 #reviews .hidden{
 opacity:0.0;filter:alpha(opacity=0);
 -webkit-transition-property:opacity, filter;
-webkit-transition-duration:600ms ,600ms;
}

Тогда сделайте это: 

   <div id="test" class='hidden'>moved</div>

Andupdate JS к этому: 

$('#moveIt').click(function() {
$('#dropout').addClass('dropopen');
$('#test').removeClass('hidden');
$('#test').addClass('test');
return false;
});
...