Question

我的样本

＆＃13;

$('#cool').hover(function() {
  $(this).css({
    "background-color": "red"
  });
  $('#fool').css({
    "background-color": "green"
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<html>

<body>
  <div id=fool>
    <div id=cool>
    </div>
  </div>
</body>
</html>

＆＃13;

代码如下：

问题是我在傻瓜事件之后执行酷事件的内容。在给定的代码中，两者都在同一时间运行。我该如何订购此活动。如何在cool.css()完成后运行fool.css()。

Answer 1

两个.css()调用的结果将在同一时间应用：下一次重绘页面。为了能够以任何特定顺序添加它们，您必须在.css()次调用之间强制重新绘制。

强制重新绘制的最简单方法是阅读元素的height或width。

$('#cool').hover(function() {
    $('#fool').css({
        "background-color": "green"
    });

    $(this).height(); // Force repaint

    $(this).css({
        "background-color": "red"
    });
});

Answer 2

$('#cool').hover(function(){
    var dis=$(this);
    $(this).parent().animate({'background-color':'green'},500,function(){dis.animate({'background-color':'red'},500);});
});

我如何在jquery中订购事件

2 个答案: