如何使jquery的CSS操作同步(即没有回调)

How to make jquery CSS manipulation synchronous (i.e. without callbacks)?

本文关键字：回调 同步 jquery 何使 CSS 操作      更新时间：2023-09-26

所以基本上我有css使元素在悬停时变大(增加高度)。我希望能够有一个功能，允许您单击元素，禁用悬停功能(通过设置高度回到它的正常状态与。css())，触发不同的代码段，然后设置悬停高度回到正常时完成。由于。css()没有回调功能，我有点困惑如何做到这一点。

这是一个jsfiddle，它给出了我想要做的布局。

http://jsfiddle.net/lennox02/99KB2/3/

有问题的代码行

//this fires first, disabling the hover height of 200px;
$(".single-item:hover").css({"height":"100px"});
//the code I want to fire, fires second
$("#6").html("Hello");
//after the code finishes firing, put the hover height back to how it was    
$(".single-item:hover").css({"height":"200px"});

试试这个，我认为它更接近你想要的http://jsfiddle.net/99KB2/6/但可能不准确。如果这还不够好，你可能不得不考虑JavaScript回调。

$(".single-item").on('click', function() {
    //this fires first, disabling the hover height of 200px;
    $(this).css("height", "100px");
    //the code I want to fire, fires second
    $("#6").html("Hello");
});
$(".single-item").on('mouseout', function() {
    $(this).css("height", "");
});

而且，使用所有jQuery事件要比混合使用JavaScript和jQuery容易得多。

相关文章：