0

我试图让页面上的元素在鼠标离开时淡出，然后对其应用一些 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"});

});

有什么建议么？

4

5 回答 5

2

你可以在callback function这里使用：

$("#tiptip_holder-" + s_id).fadeOut("fast", function () {
    $(this).css({
        "margin-left": "0px",
        "margin-top": "0px"
    });
});
于 2013-11-06T11:50:42.947 回答
0

尝试这个

$.when($("#tiptip_holder-" + s_id).fadeOut(500))
                               .done(function() {
    $(this).css({
        "margin-left": "0px",
        "margin-top": "0px"
    });
});
于 2013-11-06T11:52:24.963 回答
0

尝试将其作为回调函数：

 $("#tiptip_holder-"+s_id).fadeOut("fast", function(){
        $(this).css({"margin-left": "0px", "margin-top": "0px"});
 });
于 2013-11-06T11:52:27.337 回答
0

使用回调：

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

这将完成动画，一旦完成，启动回调（匿名）函数中的任何内容。

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

参考：

于 2013-11-06T11:50:22.703 回答
0

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

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

看看这个jsFiddle

于 2013-11-06T12:00:41.633 回答