使用jQuery的轉換時間addClass＆removeClass方法

Question

我試圖讓jQuery addClass & removeClass轉換有一個持續時間（即當懸停在div上，而不是立即100％的高度，大約需要0.5s過渡）。藍色div的高度延伸到父div的高度，並且文本居中對齊。

演示問題： 構建演示有一個奇怪的問題 - jQuery函數不起作用，但在我的實際網站上。不知道爲什麼這是，但表明它不能找到變量'hoverAwayFromWindows'或'hoverOverWindows' - 但這是沒有意義的，因爲它們是函數，而不是變量。

TRANSITION DURATION問題： 只要父div被鼠標懸停，子div就會立即應用類'懸停窗口式'，但我希望這需要時間。通過CSS設置轉換持續時間給孩子或父母失敗。我也試過改變jQuery：

$（div）.removeClass（'hover-over-windows-style'，500）; （'hover-windows-style'，500ms） ; $（div）.addClass（'hover-over-windows-style'）。animate（transition-duration：0.5s，500）;

$（div）.animate（'hover-over-windows-style'，500）;

有人可以幫助解釋我哪裏錯了嗎？

function hoverOverWindows(div) { 
 
    $(div).addClass('hover-over-windows-style'); 
 
}; 
 

 
function hoverAwayFromWindows(div) { 
 
    $(div).removeClass('hover-over-windows-style'); 
 
};

.home-match-type { 
 
    width: 47%; 
 
    height: 300px; 
 
    margin-top: 50px; 
 
    float: left; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.home-match-type-left { margin-right: 3% } 
 

 
.img-text-container { 
 
    width: auto; 
 
    height: auto; 
 
    bottom: 0; 
 
    position: absolute; 
 
    padding: 15px; 
 
    background: rgba(60, 122, 173, 0.95); 
 
} 
 

 
.img-text-container-type-2 { background: rgba(60, 122, 173, 0.95) } 
 

 
h3.img-text.img-header { float: left } 
 

 
h3.img-text.img-header.be-central { float: none } 
 

 
.img-text { 
 
    text-align: left; 
 
    margin: 0; 
 
    display: inline-block; 
 
} 
 

 

 
.img-header { 
 
    padding-bottom: 5px; 
 
    text-transform: uppercase; 
 
    border-bottom: 1px solid rgba(213, 213, 213, 0.3); 
 
} 
 

 
h3.home-featured-windows, h3.home-featured-windows a, h2.match-type-windows, h2.match-type-windows a, .match-contents a, h2.img-header-left a, h2.product-title a, .home a { 
 
    font-weight: 300; 
 
    color: #333; 
 
} 
 

 
h3.img-text.img-header.be-central { float: none } 
 

 
.windows-type-2 { color: #333 } 
 

 

 
h3.windows-type-2 a { 
 
    font-weight: 300; 
 
    color: #333; 
 
    float: right; 
 
} 
 

 
.hover-over-windows-style { 
 
    height: 100%; /* Could set to 300px */ 
 
    display: flex; 
 
    align-items: center; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
} 
 

 
.blitz-bg { 
 
    background:red; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: 50% 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="assets/css/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 

 
<article class="home-match-type home-match-type-left blitz-bg" onmouseover="hoverOverWindows(this.children)" onmouseout="hoverAwayFromWindows(this.children)"> 
 
    <div class="img-text-container img-text-container-type-2"> 
 
    <h3 class="img-text img-header be-central windows-type-2"><a href="matches/blitz.html">Header 3</a></h3> 
 
    <p class="img-text text-align-centre windows-type-2">Some text goes here;.Some text goes here;.Some text goes here;.Some text goes here;.Some text goes here;..</p> 
 
    </div> 
 
</article>

Answer 1

你不能用 「效果」 改變元素的類。它有或沒有那個類，沒有之間。

但是你可以用CSS過渡動畫：

$(function() { 
 
    $('.btn-set').click(function(e) { 
 
    e.preventDefault(); 
 
    $('.box').addClass('set'); 
 
    }); 
 
    $('.btn-rm').click(function(e) { 
 
    e.preventDefault(); 
 
    $('.box').removeClass('set'); 
 
    }); 
 
});

.box { 
 
    width: 50px; 
 
    height: 50px; 
 
    margin-top: 25px; 
 
    background-color: blue; 
 
    transition: all 0.5s ease; /* <-- look here */ 
 
} 
 
.box.set { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="btn-set">set color</button> 
 
<button class="btn-rm">remove color</button> 
 
<div class="box"></div>

或者使用jQuery動畫，但你也將需要的jQuery UI：

$(function() { 
 
    $('.btn-set').click(function(e) { 
 
    e.preventDefault(); 
 
    $('.box').animate({ 
 
     backgroundColor: "red" // <-- look here 
 
    }, 500); 
 
    }); 
 
    $('.btn-rm').click(function(e) { 
 
    e.preventDefault(); 
 
    $('.box').animate({ 
 
     backgroundColor: "blue" // <-- look here 
 
    }, 500); 
 
    }); 
 
});

.box { 
 
    width: 50px; 
 
    height: 50px; 
 
    margin-top: 25px; 
 
    background-color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<button class="btn-set">set color</button> 
 
<button class="btn-rm">remove color</button> 
 
<div class="box"></div>

Answer 2

你需要mouseenter，mouseleave，從.hover-over-windows-style刪除height，因爲這將設置由.animate()和刪除類.animate() callback

function hoverOverWindows(div) { 
 
    $(div).addClass('hover-over-windows-style'); 
 
    $(div).animate({ 
 
    height: "100%" 
 
    }, 500); 
 
} 
 

 
function hoverAwayFromWindows(div) { 
 
    $(div).animate({ 
 
    height: "40%" 
 
    }, 500, function() { 
 
    $(div).removeClass('hover-over-windows-style'); 
 
    $(div).css('height', 'auto') 
 
    }); 
 
}

.home-match-type { 
 
    width: 47%; 
 
    height: 300px; 
 
    margin-top: 50px; 
 
    float: left; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.home-match-type-left { 
 
    margin-right: 3% 
 
} 
 

 
.img-text-container { 
 
    width: auto; 
 
    height: auto; 
 
    bottom: 0; 
 
    position: absolute; 
 
    padding: 15px; 
 
    background: rgba(60, 122, 173, 0.95); 
 
} 
 

 
.img-text-container-type-2 { 
 
    background: rgba(60, 122, 173, 0.95) 
 
} 
 

 
h3.img-text.img-header { 
 
    float: left 
 
} 
 

 
h3.img-text.img-header.be-central { 
 
    float: none 
 
} 
 

 
.img-text { 
 
    text-align: left; 
 
    margin: 0; 
 
    display: inline-block; 
 
} 
 

 
.img-header { 
 
    padding-bottom: 5px; 
 
    text-transform: uppercase; 
 
    border-bottom: 1px solid rgba(213, 213, 213, 0.3); 
 
} 
 

 
h3.home-featured-windows, 
 
h3.home-featured-windows a, 
 
h2.match-type-windows, 
 
h2.match-type-windows a, 
 
.match-contents a, 
 
h2.img-header-left a, 
 
h2.product-title a, 
 
.home a { 
 
    font-weight: 300; 
 
    color: #333; 
 
} 
 

 
h3.img-text.img-header.be-central { 
 
    float: none 
 
} 
 

 
.windows-type-2 { 
 
    color: #333 
 
} 
 

 
h3.windows-type-2 a { 
 
    font-weight: 300; 
 
    color: #333; 
 
    float: right; 
 
} 
 

 
.hover-over-windows-style { 
 
    /*height: 100%;*/ 
 
    /* Could set to 300px */ 
 
    display: flex; 
 
    align-items: center; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    ; 
 
} 
 

 
.blitz-bg { 
 
    background: red; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: 50% 50%; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<article class="home-match-type home-match-type-left blitz-bg" onmouseenter="hoverOverWindows(this.children)" onmouseleave="hoverAwayFromWindows(this.children)"> 
 
    <div class="img-text-container img-text-container-type-2"> 
 
    <h3 class="img-text img-header be-central windows-type-2"><a href="matches/blitz.html">Header 3</a></h3> 
 
    <p class="img-text text-align-centre windows-type-2">Some text goes here;.Some text goes here;.Some text goes here;.Some text goes here;.Some text goes here;..</p> 
 
    </div> 
 
</article> 
 

 
<article class="home-match-type home-match-type-left blitz-bg" onmouseenter="hoverOverWindows(this.children)" onmouseleave="hoverAwayFromWindows(this.children)"> 
 
    <div class="img-text-container img-text-container-type-2"> 
 
    <h3 class="img-text img-header be-central windows-type-2"><a href="matches/blitz.html">Header 3</a></h3> 
 
    <p class="img-text text-align-centre windows-type-2">Some text goes here;.Some text goes here;.Some text goes here;.Some text goes here;.Some text goes here;..</p> 
 
    </div> 
 
</article>