Question

请查看此代码：http://jsfiddle.net/XNnHC/4270/

$(document).ready(function() {
    $("#close-btn").hide();
    var slider_width = $('.pollSlider').width(); //get width automaticly
    $('#pollSlider-button').click(function() {
        if ($(this).css("margin-right") == slider_width + "px" && !$(this).is(':animated')) {
            $('.pollSlider,#pollSlider-button').animate({
                "margin-right": '-=' + slider_width
            }); 
            $("#close-btn").hide();
        } else {
            if (!$(this).is(':animated')) //perevent double click to double margin
            {
                $('.pollSlider,#pollSlider-button').animate({
                    "margin-right": '+=' + slider_width
                });
                $("#close-btn").show(500);
                $("#pollSlider-button").css({
                    'cursor': "default"
                });
                // pointer over the close button
                $("#close-btn").css({
                    'cursor': "pointer"
                });
            }
        }
   });
});

我无法弄清楚如何切换到“关闭按钮”，以便能够在第一个动画完成后从右向左动画滑块。目前关闭按钮没有它的功能，只有在两个方面都点击了pollSlider-button时滑块才有效。我一直在挖掘互联网，尝试off.unbind（'click'），preventDefault和stopPropagation等方法，但是我没有做太多，我想我没有把代码放在正确的地方。因为我是JS和JQuery初学者，并且因为我已经找到了这个代码并且一直在努力使其适应我自己的需要，所以我意识到我真的不知道这部分代码是指什么：“{{1 }}”。我可以看到$(this)之前返回0px，动画之后返回200px，但我不明白连接到哪个元素。任何解释都会得到很好的解释，更深入的理解可能导致解决上述问题。

Answer 1

如果我理解正确，你想让“X”在点击时关闭它。一种选择是将您的关闭功能放在自己的功能中，并在单击X时调用它。所以你可以这样做：

JS Fiddle

$(document).ready(function() {
  // Cache the close button so only have to lookup once
  var closeBtn = $("#close-btn");
  closeBtn.hide();
  var slider_width = $('.pollSlider').width(); //get width automaticly

  $('#pollSlider-button').click(function() {

    if ($(this).css("margin-right") != slider_width + "px" && !$(this).is(':animated')) //perevent double click to double margin
    {
      $('.pollSlider,#pollSlider-button').animate({
        "margin-right": '+=' + slider_width
      });
      closeBtn.show(500).css({
        'cursor': "pointer"
      });;

      $("#pollSlider-button").css({
        'cursor': "default"
      });
    }

  });

  // Close function
  closeBtn.on('click', function() {
    $('.pollSlider,#pollSlider-button').animate({
      "margin-right": '-=' + slider_width
    });
    closeBtn.hide();
  });
});

Answer 2

只需在侦听器上添加关闭按钮并替换$（this）：

$(document).ready(function() {
  $("#close-btn").hide();
  var slider_width = $('.pollSlider').width(); //get width automaticly
  $('#pollSlider-button').on('click',open);

  function open(){
    if (!$('#pollSlider-button').is(':animated')) //perevent double click to double margin
    {

    $('.pollSlider,#pollSlider-button').animate({
    "margin-right": '+=' + slider_width
    });
    $("#close-btn").show(500);

    $("#pollSlider-button").css({
    'cursor': "default"
    });
    // pointer over the close button
    $("#close-btn").css({
    'cursor': "pointer"
    });
    }
    $('#pollSlider-button').off();
    $('#close-btn').on('click',close);
  };
  
  function close(){
    $('.pollSlider,#pollSlider-button').animate({
    "margin-right": '-=' + slider_width
    });
    $("#close-btn").hide(); 
    $('#pollSlider-button').on('click',open);
  };
});

.pollSlider{
    position:fixed;
    height:100%;
    background:red;
    width:200px;
    right:0px;
    margin-right: -200px;
}
#pollSlider-button{
    position:fixed;
    width:100px;
    height:50px;
    right:0px;
    background:green;
    top:300px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="pollSlider"></div>
<div id="pollSlider-button"></div>

<i class="fa fa-times fa-5x" id="close-btn" aria-hidden="true"></i>

如何停止旧的点击事件并开始一个新事件

2 个答案: