3

以下の JQuery コードがあり、このアニメーションによって行われたインライン css をクリアする必要があります

$(document).ready(function(){

$("#panel").hide(); //updated line, removing the #panel ID.

 $('#tab2').toggle(function(){ //adding a toggle function to the #tab
    $("#panel").show();

        $('#ToolsTitleSpan').text("CLOSE TOOLS");

        $('#tab2').stop().animate({right: '225'}, 800, 'swing', function() {});

        $("#panel").stop().animate({right: '72', width: '230px', opacity:0.8}, 800, 'swing', function() {

                $('.contentSideBar').fadeIn('slow');        
  });


},

function(){ //when the #tab is next cliked
 $('#ToolsTitleSpan').text("OPEN TOOLS");

 $('#tab2').stop().animate({right: '-=225'}, 800, 'swing', function() {

            $('.contentSideBar').fadeOut(slow, function() {});
 });

 $('#panel').stop().animate({width:"0", position:'absolute', float: 'right', opacity:0.1}, 800, 'swing');

});  
});

必要に応じて、HTML コードを次に示します。

<div id="panelKS"> <!--the hidden panel -->
    <div class="contentSideBarKS">
    </div>
</div>

<div id="tab2KS">
    <span id="ToolsTitleSpanOpenKS">
        <img id="bg" src="<?php echo $OUTPUT->pix_url('/buttons/opentools', 'theme')?>"/>
    </span>
    <span id="ToolsTitleSpanCloseKS">
        <img id="bg" src="<?php echo $OUTPUT->pix_url('/buttons/closetools', 'theme')?>"/>
    </span>
</div>

インラインCSSをクリアする方法を教えてください。

ありがとう

4

2 に答える 2

7

!importantCSS でを使用できます。

.test{
    right:800px !important;    
}

そのコードは、インライン CSS を無視します。

styleまたは、次を使用して DOMの属性を取得できます。

$("div.test").attr("style","");

または：

$("div.test").attr({style : ""});

あなたがより好むソリューションを使用するのはあなた次第です。

于 2013-04-01T09:10:55.427 に答える
0

多分これはあなたの問題を解決するかもしれません、申し訳ありませんが二重投稿（文字数が足りないため）

<!doctype html>
<html>
    <head>
        <style>
            #panelKS{
                width : 500px;
                background-color:#f0f;
                display:none;
            }
            #tab2KS{
                width : 500px;
                background-color:#fa0;
                display:inline-block;
                position:absolute;
            }
        </style>
    </head>
    <body>
    </body>
        <div id="panelKS"> <!--the hidden panel -->
            <div class="contentSideBarKS">
                Testing
            </div>
        </div>

        <!-- my assumtion is -->
        <div id="tab2KS">
            <span id="ToolsTitleSpanOpenKS" value="1">
                <img id="bg" src="#" alt="image 1" title="image 1"/>
            </span>


    <span id="ToolsTitleSpanCloseKS" value="2">
            <img id="bg" src="#" alt="image 2" title="image 2"/>
        </span>
    </div>

    <script src="scripts/jquery-1.9.0.min.js"></script>
    <script>
        $("#tab2KS").children().click(function(){
            $("#panelKS").css({display:"inline-block"});
            //after that in your css you could set transparency to 0 and do the animation
        });
    </script>
<body>

于 2013-04-01T10:24:01.767 に答える