jquery - hide() 函数在需要时不会隐藏图像

Question

<ul id="ulBack">
   <li><img data-src="coffee/01.jpg" class="place"></li>
   <li><img data-src="coffee/02.jpg" class="place"></li>
   <li><img data-src="coffee/03.jpg" class="place"></li>   
</ul>



 $('#btnNext').click(function () {
        $('#slide').hide();
        if (n < xlen) {n+=1;}
        else {n=0};
        change();
        border();
    });

function change(){
    var goImg = $('#ulBack img' + ':eq(' + n +')').attr('data-src');
    $('#slide').attr('src', goImg);
};

在border()功能结束时，我有：

$('#slide').show();   

所以，我想首先隐藏幻灯片，然后做所有其他事情，最后 - 显示幻灯片。

但是，很明显，在单击下一步按钮后，程序等待了一些东西，可能会执行剩下的代码，然后，最后只是快速隐藏和显示幻灯片，这不是本意。

你可以在这里看到

Answer 1

我想我明白了：您的治疗中最长的部分是请求获取我认为的新图像，为此您使用 jQuery Ajax 查询不是吗？

我认为您的 Ajax 查询是异步的，因此在加载新图片之前，会在旧图片上调用 show()。这让您感觉图片永远不会被隐藏。要解决它，请使您的 ajax 请求同步：

$.ajax({
  ...,
  async: false
})

Answer 2

你这样做：

function change(){
    var goImg = $('#ulBack img' + ':eq(' + n +')').attr('data-src');
    $('#slide').one('load', function() {
        $(this).show();
    }).attr('src', goImg).each(function() {
        if(this.complete) $(this).load();
    });
}

function border() {
    if([0,1,2,3,4,10,33,37].indexOf(n) != -1){
        $('#slide').css('border', 'none');
    } else {
        $('#slide').css('border', 'medium ridge #6c9');
    }
}

Answer 3

这可能会有所帮助..不确定这是否是您想要的

  $('#slide').hide();
        if (n < xlen) {n+=1;}
        else {n=0};
        change();
        border();
    setTimeout(function() { $("#slide").show(); }, 5000);