jQuery中

Question

我試圖動畫效果添加到上課的時候home-search-fixed要麼添加或刪除下面的jQuery代碼添加動畫與addClass以使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嘗試了一些東西來實現你正在尋找的東西。看看下面的代碼片段。

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

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; 
 
}

<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>