Question

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

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

问题是我还包括一个＆＃34;按钮＆＃34;这使用户能够移除.hover(handlerIn)上添加的250px高度。当用户点击此＆＃34;按钮＆＃34;时，将鼠标移到hover元素（handlerOut）之外; hover元素丢失250px两次。

如果用户不点击了＆＃34;按钮＆＃34;我只想触发.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后将你的设置扩展为假，即告诉代码盒子不再展开，并且它不应该进一步减小盒子的尺寸：

$(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，但无论哪种方式，你都不应该花更多的时间来学习这个工作流程 - 它只会在将来阻碍你！

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

1 个答案: