javascript - JQuery 设置 Div 样式 After Effect

Question

我认为 .flagPoint 的位置是在 jquery 效果发生之后设置的。我是 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 中删除了 float 并添加了 10px margin-left，这是指针的必要空间。在指针中我添加了这个 css:

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

请参阅此处的 fiddle 。 FIDDLE

只是一个小的修复来防止跨度文本上的换行

.flagBox span { white-space: nowrap;}