停止动画后更改CSS属性

本文介绍了停止动画后更改CSS属性的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我要一个动画完成后更改文本颜色。

I want to change a text color after a animation is completed.

我试试这个：

但不工作！：/

var menuState="closed";
$("#MENU").click(function() {
if (menuState=="closed") {
$("#SOUSMENU").animate({height: "300px"}, 1000);
menuState="open";
} else if (menuState=="open"){
$("#SOUSMENU").animate({height: "0px"}, 1000);
menuState="closed";}});
$("#MENU").click(function() {
if (menuState=="open") {
  $("h1").css('color','red');
} else if (menuState=="closed"){
$("h1").css('color','black');
  menuState="closed"; }
});

感谢您的precious帮助！

Thanks for your precious help !

推荐答案

使用 .animate

var menuState="closed";
$("#MENU").click(function() {
    if (menuState=="closed") {
        $("#SOUSMENU").animate({height: "300px"}, 1000, function() {
            $("h1").css('color','red');
        });
        menuState="open";
    } else if (menuState=="open"){
        $("#SOUSMENU").animate({height: "0px"}, 1000, function() {
            $("h1").css('color','black');
        });
        menuState="closed";
    }
});

演示：

这篇关于停止动画后更改CSS属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！