1
当卡片通过其他卡时,我有一些z-index动画的问题。 你有什么想法来改进动画并使其更平滑吗? 这里动画:https://jsfiddle.net/mk51gs1t/1/ THX需要帮助来提高扑克牌悬停效果
CSS:
.card {
display : inline-block;
position : relative;
width : 100px;
height : 200px;
margin-left : -20px;
margin-right : -20px;
/*background-color : #999999;*/
background-image:linear-gradient(90deg, #999999, #666666);
border : 3px solid #2e6da4;
z-index: 1;
transition: all .2s ease-in-out;
}
.center{
transform: scale(1.2, 1.2);
}
.previous{
transform: scale(1.1, 1.1);
}
.next{
transform: scale(1.1, 1.1);
}
JS:
$(function() {
zIndexManager($('.center'), $('.previous'), $('.next'));
var cardDOMArray = $('.card');
//cardDOMArray.hover(cardEnter, cardLeave);
cardDOMArray.hover(function (e) {
cardEnter(e.currentTarget, cardDOMArray);
}, function (e) {
cardLeave(e.currentTarget, cardDOMArray);
});
cardDOMArray.on("click", function (e) {
drawCard(e.currentTarget);
});
});
function cardEnter(e, cardDOMArray) {
// console.log("enter");
// console.log(getPreviousCard($(e)));
// console.log(getNextCard($(e)));
$('.card').removeClass("center previous next");
getPreviousCard($(e)).addClass("previous");
getNextCard($(e)).addClass("next");
$(e).addClass("center");
zIndexManager($(e), getPreviousCard($(e)), getNextCard($(e)));
}
function cardLeave(e, cardDOMArray) {
$('.card').removeClass("center previous next").css('zIndex', '1');
}
function getPreviousCard(card) {
if (card.prev().length > 0) {
return card.prev();
}
else {
return $();
}
}
function getNextCard(card) {
if (card.next().length > 0) {
return card.next();
}
else {
return $();
}
}
function zIndexManager(centerCard, previousCard, nextCard) {
var allNextCard = centerCard.nextAll();
//console.log(allNextCard);
var allNextCardLength = allNextCard.length;
//console.log(allNextCardLength);
if (allNextCardLength > 0) {
centerCard.css('zIndex', allNextCardLength);
allNextCard.each(function() {
$(this).css('zIndex', --allNextCardLength);
});
}
}
HTML:
<div class="container">
<h1>carte</h1>
<div class="container cardWidget">
<div class="card ">
</div>
<div class="card ">
</div>
<div class="card">
</div>
<div class="card ">
</div>
<div class="card previous">
</div>
<div class="card center">
</div>
<div class="card next">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
<div class="card">
</div>
</div>
</div>
请想想接受我的答案... TY – Error404