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

Question

在以下代码中，在 .hover() 上#wrap 元素的高度通过 jQuery animate() 设置动画。

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

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

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

Fiddle

$(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 后将 expanded 设置为 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
      });
  };

});

行得通。 Fiddle

编辑

一个警告 - 在使用 jQuery.animate() 函数之前，您真的应该三思而后行。与 CSS 动画或 GSAP 等 远 更好的 js 动画平台相比，jQuery.animate() 函数大约慢 10 倍::reference .

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