Question

我认为在jquery效果发生后，.flagPoint的位置正在设置。我是jquery的新手，想知道是否有人可以指出为什么在效果运行后设置div样式？

.flagPoint div确实正确设置了自己。它必须跳到bounce效果的位置。 *如果我注释掉bounce效果，则可以正常工作在Firefox 26.0和IE 11上

你可以在这里找到我的例子： JSFiddle

CSS：

.pointerFlag
{
    width:auto;
    margin:auto;
    float:left;
}
.flagBox
{
    width:auto;
    background:LightGray;
    height:30px;
    float:right;
    box-shadow: 1px 1px 1px #888888;  
}
.flagPoint
{
    width:0px;
    height:0px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 10px solid LightGray;
    float:right;
}

javascript：

function showBalance() {

    $("#divBalanceFlag").show("slide", {
        direction: "left"
    }, 150).delay(20);
    $("#divBalanceFlag").effect('bounce', {
        times: 2,
        distance: 10,
        direction: 'right'
    }, 350).delay(50);
}

function hideBalance() {
    $("#divBalanceFlag").hide("slide", {
        direction: "left"
    }, 150);
}

$(document).ready(function () {
    $("#divBalanceFlag").hide();

});

HTML：

<table>
    <tr>
        <td style="position:absolute;">

            <div id="divBalanceFlag" class="pointerFlag" style="position:relative; z-index:100; bottom:0px;">

                <div class="flagBox"> <span runat="server" id="accountBalanceSpan" style=" line-height:30px; color:#535353; padding-left:5px; padding-right:10px; font-size:medium; font-weight:bold; "> Your Balance is: $11</span> 
                </div>

                <div class="flagPoint"></div>

            </div>

        </td>
    </tr>
</table>
<br /> <br />
<button onclick="showBalance();"> Show </button>
<button onclick="hideBalance();"> Hide </button>

由于

Answer 1

我已经从你的flagBox中删除了浮点数并添加了一个10px的margin-left，这是指针的必要空间。在指针中我添加了这个css：

position:absolute;
left:0;
bottom:0;

在这里看小提琴。 FIDDLE

只是一点点修复，以防止跨度文本上的换行

.flagBox span { white-space: nowrap;}

JQuery设置效果后的Div风格

1 个答案: