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

您可以!important在 CSS 中使用：

.test{
    right:800px !important;    
}

该代码将使您的内联 css 被忽略。

或者您可以使用以下方法获取 DOM 的属性style：

$("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 回答