Deslizamiento cronometrado del elemento con jQuery.

Me gustaría tener una diapositiva de elemento a la izquierda 10 segundos después de que se cargue la página. Pero no quiero que desaparezca de la página por completo. Solo quiero que se deslice 200px. Luego, cuando hago clic en la parte visible restante, quiero que se deslice hacia la derecha.

No estoy muy seguro de cómo establecer la distancia... Esto es lo que tengo hasta ahora:

$("#myEl").click(function(){
    $(this).animate({width:'toggle'},500);
});

preguntado el 03 de mayo de 12 a las 21:05

3 Respuestas

$("#myEl").click(function(){
    if ($(this).hasClass('left')) {
        $(this).animate({ left: '+=200' }, 500).removeClass('left');
    } else {
        $(this).animate({left:'-=200'}, 500).addClass('left');
    }
});

He hecho un JSFiddle demostrando esto.

contestado el 03 de mayo de 12 a las 21:05

Tratar,

$(function () {
   var $myEl = $('#myEl');
   var orgPos = $myEl.position().left;

   $myEl.click(function(){
      //Moves to origPos after click
      $(this).stop(true, false).animate({left: orgPos},500); 
   })
   .animate({left: '-=200'}, 10000); //Animates for 10 secs
});

Edit: DEMO <-- Actualizado con div más grande

contestado el 03 de mayo de 12 a las 21:05

Demostración de jsBin

function tabHide(){                             // define a 'HIDE' function
  $('#tab').stop().animate({left:-150},1000); 
}

function tabShow(){                             // define a 'SHOW' function
  $('#tab').stop().animate({left: -1 },1000);
}

// Now let's play with this functions:

setTimeout(function(){                          // run 'HIDE' after 10"
  tabHide();
},10000);

$('#tab').toggle(function(){                    // click toggle 'SHOW' / 'HIDE'
   tabShow();
},function(){
   tabHide();
});

jQuery .alternar()
jQuery .detener()

Respondido el 20 de junio de 20 a las 10:06

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.