时间戳

首页 > 解决方案 > fadeIn 不适用于使用 jquery 的第一个打开页面

jquery - fadeIn 不适用于使用 jquery 的第一个打开页面

问题描述

我是初学者。所以我需要你对 jquery 的帮助。我有现有的代码，我使用淡入淡出来显示元素。但它不工作

window.onload = function()
{
    let inp_findStock_Id = $('#inp_findStock_Id');
    let coba = getQueryVariable("search");
    inp_findStock_Id.val(coba);
    // inp_findStock_Id.preventDefault(); // if add this code, fadeIn can running, but ajx_findStock can not running automaticly.
    ajx_findStock();
    $('#tblAjax').fadeIn(800);
    inp_findStock_Id.select();
}

function getQueryVariable(variable) {
    let query = window.location.search.substring(1);
    let parms = query.split('&');
    for (let i = 0; i < parms.length; i++) {
        let pos = parms[i].indexOf('=');
        if (pos > 0 && variable === parms[i].substring(0, pos)) {
            return parms[i].substring(pos + 1);
        }
    }
    return "";
}

标签： jqueryfadein

解决方案

该元素$('#tblAjax')必须首先设置为display: none;，否则淡出效果将不会在当前显示的元素上起作用。

未设置显示：

$(function() {
  $('.box').fadeIn(800);
});
.box {
  background: #222;
  width: 100px;
  height: 100px;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">display: auto</div>

将 Display 设置为none： 

$(function() {
  $('.box').fadeIn(800);
});
.box {
  background: #222;
  width: 100px;
  height: 100px;
  color: white;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">display: none</div>

推荐阅读