仅在未单击按钮时才触发CSS动画

Question

在下面的代码中，在.hover()上通过jQuery animate() #wrap元素的高度。

在handlerIn元素获得250px的高度，在handlerOut它失去250px的高度。

问题是我还添加了一个“按钮”，使用户能够删除.hover(handlerIn)上添加的250px高度。 当用户单击此“按钮”时，将鼠标移动到hover元素之外（ handlerOut ）; hover元素两次丢失250px。

如果用户没有点击“按钮”，我只想触发.hover(handlerOut)函数。

小提琴

$(document).ready(function() {
  $("#wrap").hover(
    function() {
      $(this).animate({height: '+=250'}, 'slow');
      $('#button').css('display', 'block');
      expanded = true;
      console.log("expanded is " + expanded);
    },
    function () {
      $(this).animate({height: '-=250px'}, 'slow');
      $("#button").hide();
      expanded = false;
      console.log("expanded is " + expanded);
    }
  );
  $('#wrap').on('click', function(){
    window.open('http://google.com', 'click', 'window settings');
    return false;
    console.log('click');
  });
  if(expanded = true){
    $("#button").on('click', function(){
        $('#wrap').animate({height: '-=250px'}, 'slow');
        $("#button").hide();
        return false;
      });
  };

});

Answer 1

（虽然我不一定认为你是以正确的方式进行此操作）你需要确保在单击X后将设置扩展为false，即告诉代码该框不再展开并且它不应该进一步减小盒子的大小：

$(document).ready(function() {
  $("#wrap").hover(
    function() {
      $(this).animate({height: '+=250'}, 'slow');
      $('#button').css('display', 'block');
      expanded = true;
      console.log("expanded is " + expanded);
    },
    function () {
      $(this).animate({height: '-=250px'}, 'slow');
      $("#button").hide();
      expanded = false;
      console.log("expanded is " + expanded);
    }
  );
  $('#wrap').on('click', function(){
    window.open('http://google.com', 'click', 'window settings');
    return false;
    console.log('click');
  });
  if(expanded = true){
    $("#button").on('click', function(){
        $('#wrap').animate({height: '-=250px'}, 'slow');
        $("#button").hide();
        return expanded = false;    //This is all I changed
      });
  };

});

这样可行。 小提琴

编辑

一句警告 - 在使用jQuery.animate()函数之前，您应该三思而后行。 相比于说，像CSS动画或一个更好的JS动画平台像GSAP的jQuery.animate()函数是慢10倍 :: 参考 。

就个人而言，我会使用GSAP，但无论哪种方式，你都不应该花更多的时间来学习这个工作流程 - 它只会在将来阻碍你！