Question

对于此组件

<span id="uplodIsOk" class="notextoverflow" style="position: absolute; top:585px; width:40px left: 305px; z-index:1000; font-size:11px;font-weight: bold; display:inline-block; vertical-align:middle; margin-bottom:7px; color:#3bb3e0;display: none;" >La photo est charg&#233;e avec succ&#233;s ! </span>

我应用这个jquery：

$("#uplodIsOk").fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200);

当最后一个淡入淡出发生时，div从left: 305px;移动到几乎left:0px;

在浏览器控制台中，我发现从组件样式中删除了属性left （以及width）：

<span id="uplodIsOk" class="notextoverflow" style="position: absolute; top: 405px; z-index: 1000; font-size: 11px; font-weight: bold; display: block; vertical-align: middle; margin-bottom: 7px; color: rgb(59, 179, 224);">La photo est chargée avec succés ! </span>

组件应该保持其位置，为什么它会改变？为什么左边的属性在淡入淡出后会消失？

Answer 1

jQuery淡入淡出动画有已知问题w / r / t定位;基本上，默认的on-complete代码会混乱使用内联样式。这是不使用内联样式的另一个原因;如果样式特定于此元素，则应在链接的CSS文件中按ID更改它。将以下内容添加到CSS和HTML文件中，您应该是金色的：

新HTML：

<span id="uplodIsOk" class="notextoverflow">La photo est charg&#233;e avec succ&#233;s ! </span>

新CSS：

#uplodIsOk {
    position: absolute;
    top:585px;
    width:40px
    left: 305px;
    z-index:50;
    font-size:11px;
    font-weight: bold;
    display:inline-block;
    vertical-align:middle;
    margin-bottom:7px;
    color:#3bb3e0;
    display: none;
}

或者，如果您没有链接的CSS文件，可以将CSS包装在样式标记中并将其粘贴在标题中，如下所示：

<style>
#uplodIsOk {
    position: absolute;
    top:585px;
    width:40px
    left: 305px;
    z-index:50;
    font-size:11px;
    font-weight: bold;
    display:inline-block;
    vertical-align:middle;
    margin-bottom:7px;
    color:#3bb3e0;
    display: none;
}
</style>

在使用jquery进行fadeIn（）之后，组件会更改其位置

1 个答案: