jquery transition effect

Question

I'm trying to get the "Tell a friend button" on this website to return to its original position when the user clicks on "Close." I got it to work now but the transition is awful. When you click on close the button appears below the parent div before taking its original position. The function is as shown below:

$(document).ready(function() {
    $(".tell").click(function () {
        $("DIV#tellform").show("slide", { direction: 'left' }, 2000);
         $(".tell").hide("fade", {}, 1);
    });

    $(".closer").click(function () {
        $("DIV#tellform").hide("slide", { direction: 'left' }, 2000);
        $(".tell").show("fade", {}, 1);
    });
});

Answer 1

You should also hide the button without fade when first clicking it, cause that looks strange as well to me.

Maybe declare the change in a separate function which you then delay?

   $(".closer").click(function () {

  $("DIV#tellform").hide("slide", { direction: 'left' }, 2000);

 setTimeout(delay,2000);

  function delay() {
  $(".tell").show("fade", {}, 1);
  }
  });

});

Something similar should work at least. Good luck!

Answer 2

I did set it as shown below and it gives the parent DIV time to preposition before it shows fully because it fades back slowly.

    $(document).ready(function() {

   $(".tell").click(function () {

      $("DIV#tellform").show("slide", { direction: 'left' }, 2000);

      $(".tell").hide("", {} );

});

   $(".closer").click(function () {

      $("DIV#tellform").hide("slide", { direction: 'left' }, 2000);
      $(".tell").show("fade", {}, 45000);

      });

  });



</script>