Question

我试图让页面上的元素在mouseleave上淡出，然后对它应用一些css属性。问题是css属性在完全淡出之前被添加到元素中。这是我尝试过的：

$(".tiptrigger").mouseleave(function() { 
    var s_id = $(this).attr('id');

    $("#tiptip_holder-"+s_id).fadeOut("fast");

    $("#tiptip_holder-"+s_id).css({"margin-left": "0px", "margin-top": "0px"});

});

如果不起作用，我试过：

$(".tiptrigger").mouseleave(function() { 
    var s_id = $(this).attr('id');

    $("#tiptip_holder-"+s_id).fadeOut("fast").delay(500).css({"margin-left": "0px", "margin-top": "0px"});

});

当这不起作用时，我终于尝试了：

$(".tiptrigger").mouseleave(function() { 
    var s_id = $(this).attr('id');
    $("#tiptip_holder-"+s_id).fadeOut("fast");

}, function() {
    $("#tiptip_holder-"+s_id).css({"margin-left": "0px", "margin-top": "0px"});

});

有什么建议吗？

Answer 1

您可以在此处使用callback function，如：

$("#tiptip_holder-" + s_id).fadeOut("fast", function () {
    $(this).css({
        "margin-left": "0px",
        "margin-top": "0px"
    });
});

Answer 2

使用回调：

$("#tiptip_holder-"+s_id).fadeOut("fast", function(){
    $(this).css({"margin-left": "0px", "margin-top": "0px"});
});

这将完成动画，一旦完成，就会启动回调（匿名）功能中的任何内容。

使用delay()只会延迟动画队列。

参考文献：

fadeOut()。

Answer 3

试试这个

$.when($("#tiptip_holder-" + s_id).fadeOut(500))
                               .done(function() {
    $(this).css({
        "margin-left": "0px",
        "margin-top": "0px"
    });
});

Answer 4

尝试将其作为回调函数：

 $("#tiptip_holder-"+s_id).fadeOut("fast", function(){
        $(this).css({"margin-left": "0px", "margin-top": "0px"});
 });

Answer 5

您可以在fadeOut上使用回调，在动画完成时执行某些操作，如下所示：

$(".inner").mouseleave(function() {
    $(this).fadeOut(400, function() {
        $(this).css({
            "margin-top": "0px",
            "margin-bottom": "0px"
        });
    });
});

看看这个jsFiddle

jQuery过早地将css属性添加到元素中

5 个答案: