使用jQuery切換兩個CSS動畫只能工作一次

我想在兩個使用jQuery的CSS動畫之間切換，但它們只能工作一次！我怎樣才能讓它保持轉換？此外，由於某種原因，這在jsFiddle中似乎不起作用。謝謝，麻煩您了。使用jQuery切換兩個CSS動畫只能工作一次

//hide and show counter-button 
 
$('#counter-button').click(function() { 
 
    $('#counter').toggle(); 
 

 
    //move button down/up on click 
 
    if ($('#counter-button').attr('class') === 'movedown') { 
 
    $('#counter-button').addClass('moveup'); 
 

 
    } else { 
 
    $('#counter-button').addClass('movedown'); 
 
    } 
 
});

#counter-button { 
 
    font-size: 20px; 
 
    position: fixed; 
 
    right: 90px; 
 
    bottom: 190px; 
 
    z-index: 2; 
 
    cursor: pointer; 
 
} 
 

 
.movedown { 
 
    animation: down ease forwards 0.5s; 
 
} 
 

 
@keyframes down { 
 
    from { 
 
    right: 90px; 
 
    bottom: 190px; 
 
    } 
 
    to { 
 
    right: 90px; 
 
    bottom: 100px; 
 
    } 
 
} 
 
.moveup { 
 
    animation: up ease forwards 0.5s; 
 
} 
 
@keyframes up { 
 
    from { 
 
    right: 90px; 
 
    bottom: 100px; 
 
    } 
 
    to { 
 
    right: 90px; 
 
    bottom: 190px; 
 
    } 
 
} 
 
#counter { 
 
    position: fixed; 
 
    height: 80px; 
 
    width: 228px; 
 
    bottom: 100px; 
 
    right: 20px; 
 
    border: 2px solid black; 
 
    border-radius: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="counter-button"> 
 
    COUNTER 
 
</div> 
 

 
<div id="counter"></div>

來源

2016-11-08 Cleo

你忘了刪除不必要的類，因此意外的行爲。只需添加removeClass並刪除相應的類。摘錄如下

//hide and show counter-button 
 
$('#counter-button').click(function() { 
 
    $('#counter').toggle(); 
 

 
    //move button down/up on click 
 
    if ($('#counter-button').attr('class') === 'movedown') { 
 
    $('#counter-button').addClass('moveup').removeClass('movedown'); 
 

 
    } else { 
 
    $('#counter-button').addClass('movedown').removeClass('moveup'); 
 
    } 
 

 
});

#counter-button { 
 
    font-size: 20px; 
 
    position: fixed; 
 
    right: 90px; 
 
    bottom: 190px; 
 
    z-index: 2; 
 
    cursor: pointer; 
 
} 
 
.movedown { 
 
    animation: down ease forwards 0.5s; 
 
} 
 
@keyframes down { 
 
    from { 
 
    right: 90px; 
 
    bottom: 190px; 
 
    } 
 
    to { 
 
    right: 90px; 
 
    bottom: 100px; 
 
    } 
 
} 
 
.moveup { 
 
    animation: up ease forwards 0.5s; 
 
} 
 
@keyframes up { 
 
    from { 
 
    right: 90px; 
 
    bottom: 100px; 
 
    } 
 
    to { 
 
    right: 90px; 
 
    bottom: 190px; 
 
    } 
 
} 
 
#counter { 
 
    position: fixed; 
 
    height: 80px; 
 
    width: 228px; 
 
    bottom: 100px; 
 
    right: 20px; 
 
    border: 2px solid black; 
 
    border-radius: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="counter-button"> 
 
    COUNTER 
 
</div> 
 

 
<div id="counter"> 
 

 
</div>

更新的代碼

而且可以通過最初加入moveup類的button優化上面的代碼，然後你可以使用toggleClass不檢查任何條件。

//hide and show counter-button 
 
$('#counter-button').click(function() { 
 
    $('#counter').toggle(); 
 
    //move button down/up on click 
 
    $(this).toggleClass('movedown moveup'); 
 
});

#counter-button { 
 
    font-size: 20px; 
 
    position: fixed; 
 
    right: 90px; 
 
    bottom: 190px; 
 
    z-index: 2; 
 
    cursor: pointer; 
 
} 
 
.movedown { 
 
    animation: down ease forwards 0.5s; 
 
} 
 
@keyframes down { 
 
    from { 
 
    right: 90px; 
 
    bottom: 190px; 
 
    } 
 
    to { 
 
    right: 90px; 
 
    bottom: 100px; 
 
    } 
 
} 
 
.moveup { 
 
    animation: up ease forwards 0.5s; 
 
} 
 
@keyframes up { 
 
    from { 
 
    right: 90px; 
 
    bottom: 100px; 
 
    } 
 
    to { 
 
    right: 90px; 
 
    bottom: 190px; 
 
    } 
 
} 
 
#counter { 
 
    position: fixed; 
 
    height: 80px; 
 
    width: 228px; 
 
    bottom: 100px; 
 
    right: 20px; 
 
    border: 2px solid black; 
 
    border-radius: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="counter-button" class="moveup"> 
 
    COUNTER 
 
</div> 
 

 
<div id="counter"> 
 

 
</div>

來源

2016-11-08 08:20:29

而不是.attr('class') === 'movedown'使用hasClass()檢查類。在添加moveup類時，應刪除movedown類，反之亦然。

請檢查下面的代碼。

//hide and show counter-button 
 
$('#counter-button').click(function() { 
 
    $('#counter').toggle(); 
 

 
    //move button down/up on click 
 
    if ($('#counter-button').hasClass('movedown')) { 
 
    $('#counter-button').addClass('moveup').removeClass('movedown'); 
 
    } else { 
 
    $('#counter-button').addClass('movedown').removeClass('moveup'); 
 
    } 
 
});

#counter-button { 
 
    font-size: 20px; 
 
    position: fixed; 
 
    right: 90px; 
 
    bottom: 190px; 
 
    z-index: 2; 
 
    cursor: pointer; 
 
} 
 

 
.movedown { 
 
    animation: down ease forwards 0.5s; 
 
} 
 

 
@keyframes down { 
 
    from { 
 
    right: 90px; 
 
    bottom: 190px; 
 
    } 
 
    to { 
 
    right: 90px; 
 
    bottom: 100px; 
 
    } 
 
} 
 
.moveup { 
 
    animation: up ease forwards 0.5s; 
 
} 
 
@keyframes up { 
 
    from { 
 
    right: 90px; 
 
    bottom: 100px; 
 
    } 
 
    to { 
 
    right: 90px; 
 
    bottom: 190px; 
 
    } 
 
} 
 
#counter { 
 
    position: fixed; 
 
    height: 80px; 
 
    width: 228px; 
 
    bottom: 100px; 
 
    right: 20px; 
 
    border: 2px solid black; 
 
    border-radius: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="counter-button"> 
 
    COUNTER 
 
</div> 
 

 
<div id="counter"></div>

來源

2016-11-08 08:20:37 void

@RoryMcCrossan最初OP可是沒有任何的類在他的HTML，所以'toggleClass'要麼同時刪除或將添加兩者。如果'moveup'已經存在，那麼可以使用'toggleClass'來完成。 – void

啊，是的，你是對的。我的錯。儘管我建議在元素中添加一個默認的狀態類來防止模糊，並使JS更簡單。 –

@RoryMcCrossan yes true！ :) – void

使用toggleClass

 //hide and show counter-button 
 
    $('#counter-button').click(function() { 
 
     $('#counter').toggle(); 
 

 
     $('#counter-button').toggleClass('moveup movedown'); 
 

 

 
    });

#counter-button { 
 
    font-size: 20px; 
 
    position: fixed; 
 
    right: 90px; 
 
    bottom: 190px; 
 
    z-index: 2; 
 
    cursor: pointer; 
 
} 
 
.movedown { 
 
    animation: down ease forwards 0.5s; 
 
} 
 
@keyframes down { 
 
    from { 
 
    right: 90px; 
 
    bottom: 190px; 
 
    } 
 
    to { 
 
    right: 90px; 
 
    bottom: 100px; 
 
    } 
 
} 
 
.moveup { 
 
    animation: up ease forwards 0.5s; 
 
} 
 
@keyframes up { 
 
    from { 
 
    right: 90px; 
 
    bottom: 100px; 
 
    } 
 
    to { 
 
    right: 90px; 
 
    bottom: 190px; 
 
    } 
 
} 
 
#counter { 
 
    position: fixed; 
 
    height: 80px; 
 
    width: 228px; 
 
    bottom: 100px; 
 
    right: 20px; 
 
    border: 2px solid black; 
 
    border-radius: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="counter-button" class="moveup"> 
 
    COUNTER 
 
</div> 
 

 
<div id="counter"> 
 

 
</div>

來源

2016-11-08 08:22:36 madalinivascu

使用jQuery切換兩個CSS動畫只能工作一次

回答

相關問題