action after a delay

Question

I have a problem with this jquery script.

toggle:function()
{
 if(this.opened){
   $("slideToBuyBottomBtnClosed").setStyle("display","block");
   $("slideToBuyBottomBtnOpen").setStyle("display","none");
   $("sildeToBuyContent").setStyle("overflow","hidden");
   this.openOrCloseEffect.start({height:0});
   this.opened=false
 }else{
   $("slideToBuyBottomBtnClosed").setStyle("display","none");
   $("slideToBuyBottomBtnOpen").setStyle("display","block");
   setTimeout($("sildeToBuyContent").setStyle("overflow","visible"), 1000);
   this.openOrCloseEffect.start({height:182}); 
   this.opened=true
 }
}

I'm fighting with the setTimeout - I need to have this line:

$("sildeToBuyContent").setStyle("overflow","visible");

started with a 1 second delay but I don't know if setTimeout is the right way.

Answer 1

You could use the Timers Plugin.

Answer 2

You need to pass a function as the first argument to setTimeout. Change

setTimeout($("sildeToBuyContent").setStyle("overflow","visible"), 1000);

to

setTimeout(function () { $("sildeToBuyContent").setStyle("overflow","visible") }, 1000);

This will change the overflow of the element after 1 second.

Answer 3

first argument to setTimeout() is a function or a string of code, so try:

setTimeout('$("sildeToBuyContent").setStyle("overflow","visible")', 1000);

Answer 4

There's a few things wrong here.

1. $('slideToBuyBottomBtnClosed') will be trying to find all elements with that as their tag name, that is <slideToBuyBottomBtnClosed> elements. You probably want to use a hash at the start to select by id, or a dot to select by class name, depending on your code.

2. There's a couple of typos (sildeToBuyContent)

3. Coming to the actual issue with timeouts, the problem is on this line:

   setTimeout($("sildeToBuyContent").setStyle("overflow","visible"), 1000)

When it comes to here, it will evaluate the contents of the brackets before passing them to the setTimeout function, just as it would if you typed function(3 + 2). If you want that to run after one second, you can pass it an actual function like this:

setTimeout(function() {
    $('#slideToBuyContent').setStyle("overflow", "visible");
}, 1000);

or as a string to be evaluated (though this is much messier in my opinion);

setTimeout("$('#slideToBuyContent').setStyle('overflow', 'visible')", 1000);

There's also this method, which probably won't work in your situation, but it would save you creating another anonymous function:

setTimeout($('#slideToBuyContent').setStyle, 1000, 'overflow', 'visible');

Answer 5

Thank you for your help. You helped me a lot.

i dont wanna bother you but do you guys have an idea for this action why it wont work :(

$("ul.sf-menu li").mouseover(function(){
   $("#sildeToBuyContentWindow").css("overflow","visible");
});

i want that by mouseover of all < li> in < ul class="sf.menu"> - also the < li> in the second an third level of the < ul class="sf.menu"> the overflow of the element with the ID #sildeToBuyContentWindow changes to visible.

this was the originals code i used to bild my action but without success.

$(document).ready(
  function(){
    $( '#switches li' ).mouseover(
      function(){
        $( "#slides div" ).hide();
        $( '#switches li' ).css( 'font-weight', 'normal' );
        $( this ).css( 'font-weight', 'bold' );
        $( '#slide' + $( this ).attr( 'id' ).replace( 'switch', '' ) ).show();
      }
    );
  }
);