JQuery設置Div風格後效果

我認爲在jQuery效果發生後，設置.flagPoint的位置。我是jquery的新手，想知道是否有人可以指出效果運行後爲什麼設置了div樣式？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>

感謝

來源

2014-01-30 Jaiesh_bhai

動畫似乎 – TheYaXxE

您使用的瀏覽器是良好的我斷行？ –

看起來很不錯 - IE11。 – TimSPQR

我已刪除您flagBox浮動，並添加了10px的利潤率左，這是爲指針所需的空間。並在指針我已經添加此CSS：

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

在這裏看到的小提琴。 FIDDLE

只是一個小補丁，以防止跨度文本

.flagBox span { white-space: nowrap;}

來源

2014-01-30 18:25:44 Patrick

哈哈真棒我正要給你的答案加上'white-space：nowrap'。這工作完美！謝謝！ –

JQuery設置Div風格後效果

回答

相關問題