使用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动画只能工作一次

回答

相关问题