4

JQuery addclassはクラスをまったく追加していないため、Webキットの遷移は機能していません。以下の関数では、最初のaddクラスが機能していますが、2番目のクラスは機能していません。何が起こっている。

働き

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/

何か案は 。

素晴らしい

4

2 に答える 2

5

スタイルにフラグを追加するのを忘れました!importantが、フィドルの前半で使用しました。それが最初の要素で機能した理由です。

デフォルトでは、CSSルールは特定の順序で適用されます。より具体的なセレクターはより一般的なセレクターをオーバーライドするため、要素にクラス（一般）を追加すると、アイテムID（特定）の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/

于 2011-06-15T17:27:19.220 に答える
0

それ以外の

#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 to this：

$('#moveIt').click(function() {
$('#dropout').addClass('dropopen');
$('#test').removeClass('hidden');
$('#test').addClass('test');
return false;
});
于 2011-06-15T17:26:00.033 に答える