Question

我想在添加或删除类home-search-fixed时向下面的jQuery代码添加动画效果，以便div home-search-box动画进出

$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 180) {
    $("#menu-item-504").click(function (evt) {
        $(".home-search-box")
        .addClass("home-search-fixed");
         evt.preventDefault();
    });
    } else {
 $(".home-search-box")
        $(".home-search-box")
        .removeClass("home-search-fixed");

 }

Fiddle

Answer 1

我不确定，你所期待的是可能的。因为您正在寻找从初始到固定的动画定位div。我只是尝试通过css transition来实现你想要的东西。请看下面的代码段。

＆＃13;

$("#menu-item-504").click(function() {
  $(".home-search-box").addClass("home-search-fixed");
});

＆＃13;

body {
  height: 3000px;
}

#menu-item-504 {
  height: 20px;
}

.home-search-box {
  background: red;
  transition: all 2s ease;
  height: 50px;
  position: initial;
  top: 30px;
}

.somediv .home-search-fixed {
  position: fixed;
  top: 100px;
  height: 200px !important;
  background: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-504" class="header-avail menu-item menu-item-type-custom menu-item-object-custom menu-item-504" style="display: inline-block !important;"><a href="#" class="menu-image-title-after"><span class="menu-image-title">Check Availability</span></a></li>
<div class="somediv">
  <div class="home-search-box">
    some content here
  </div>
</div>

＆＃13;

在jQuery中使用addClass添加动画

1 个答案: