jquery - jQuery滑块功能

Question

当用户单击“关闭”时，我试图让此页面上的“告诉朋友按钮”返回到其原始位置，但它做了一些不同的事情。当你点击它时它会打开幻灯片，我希望它在用户点击关闭时做相反的事情。功能如下图：

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

    $(".closer").click(function () {
        $("DIV#tellform").show("slide", { direction: 'right' }, 0);
    });
});

HTML如下所示：

<div class="closer">
    <a href="#">X close</a>
</div>

Answer 1

改变

$("DIV#tellform").show("slideTo", { direction: 'right' }, 0);

到

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

Answer 2

我更改了如下所示的功能，它现在正在做我想要的。

<script type="text/javascript">

    $(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);

      });

  });



</script>

Answer 3

或这个：

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

    $(".tell").hide();
    $("#tellform").animate({
      width: 'toggle'
    }, 2000 );

});


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

    $("#tellform").animate({
      width: 'toggle'
    }, 2000, function(){
        $(".tell").show();
    });

});