CODEWITHSUNDEEP
jqueryhide
qadenza
qadenza

Reputation: 9293

hide() function does not hide the image when is needed

<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);
};

At the end of border() function I have: 

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

So, I want firstly hide the slide, then do all other things, and finally - show the slide.

But, it is evident that after clicking next button, program waits something, probably executes the rest of code, and then, at the end, just quickly hides and shows the slide, which is not the intention.

You can see here

Upvotes: 0

Views: 100

Answers (3)

adeneo
adeneo

Reputation: 318182

You do this like so :

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');
    }
}

Upvotes: 2

Ricola3D
Ricola3D

Reputation: 2442

I think I got it: the longest part of your treatment is a request to get the new image I think, and for that you use a jQuery Ajax query isn't it ?

I think your Ajax query is asynchronous, and thus the show() is called on the old picture, before the new picture is loaded. This gives you the feeling the picture is never hidden. To solve it, make your ajax request synchronous:

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

Upvotes: 2

Manoj Purohit
Manoj Purohit

Reputation: 3453

This might help .. not sure if this is what you want

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

Upvotes: 0

Related Questions