setTimeout not working properly when used in form

JavaScript
1

Hello,

I’m trying to hide a div (in this case “div1”) 3 seconds after the “Next” button is clicked, and show div2.

It’s working when I use the bare basics code here: http://jsfiddle.net/pfryarwz/

But when I put it together with my whole form code, it’s not working.
http://fotografocasamentosaoluis.com.br/showhide/index.html

Help please?

2

Something is forcing jQuery into noConflict mode, which means that it is relinquishing use of the $ alias.

Change your code thus:

jQuery(function() {
  jQuery('#form-pagebreak-next_14').click(function(){
    showDiv1();
  });
});

function showDiv1() {
  setTimeout(function () {
    jQuery('#div1').hide();
    showDiv2();
  }, 3000);
}

function showDiv2() {
  jQuery('#div2').show();
}

and all will be well.

1 Like
3

what if you want to alternate them? set a second time out for the second div?

function showDiv2() {
  jQuery('#div2').show();
}
function showDiv2() {
  setTimeout(function () {
    jQuery('#div2').hide();
    showDiv1();
  }, 3000);
}
4

I would consider making things more generic, so that I could write something like:

swapElems("#div1", "#div2", 3000);

or:

swapElems("#div2", "#div1", 3000);
5

ok thank you will try it out later for grins and giggles
D