Question

我有一个简单的代码，可以在单击div时删除一个类。我正在寻找的是，不是只显示点击div的时候，我可以让它从左向右滑动吗？

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 140) {
    $('#primary-menu-container').addClass("hide-nav-fixed");
  } else {
    $('#primary-menu-container').removeClass("hide-nav-fixed");
  }
});

Answer 1

只需制作另一个名为'slide-left'的课程

.slide-left{
    margin-left:-500px;
    transition:margin-left 500ms;
}

并像添加其他类一样添加它。然后，在500ms后你可以隐藏它。

编辑：您可以按照相同的策略以任何方式移动div。并且根据div的当前css属性，其他属性更适合制作动画

Answer 2

这是你想要的：

Animate.css

您可以附加到html元素的简单CSS动画的集合。在您按下按钮之前，请查看作者如何在演示中链接动画，并在删除项目之前执行相同操作（在实际删除项目之前设置足够长的计时器）。添加时，您只需添加动画类。

大量动画似乎适合从列表中删除条目

你总是可以自己制作动画，但为什么要浪费时间，这些都经过了战斗测试和工作。如果你不想整个包装通过删除你不需要的东西来制作你自己的东西？

Answer 3

没有CSS3（对于非常旧的浏览器版本不兼容），您可以在添加类之后使用jquery animate函数：

$('#primary-menu-container').animate({"left":"0px"}, "slow");

Answer 4

只需在add / removeClass函数中添加参数，如下所示：

<强> .addClass('class-name', time-in-milliseconds, 'effect');

Swing效果持续1秒的结果：

$(document).scroll(function() {
    var y = $(this).scrollTop();
    if (y > 140) {
        $('#primary-menu-container').addClass('hide-nav-fixed', 1000, 'swing');
    } 
    else {
        $('#primary-menu-container').removeClass('hide-nav-fixed', 1000, 'swing');
    }
});

以下是文档：

addClass（）http://api.jqueryui.com/addclass/
removeClass（）http://api.jqueryui.com/removeclass/

在Jquery中为addClass和removeClass设置动画

4 个答案: