Question

当我点击div #cart-button并且动画结束时，光标必须更改为正常而不是指针，并在再次单击时返回指针。（cursor: pointer;是CSS文件中div的默认样式。）

我尝试将document.getElementById("cart-button").style.cursor="pointer";放在else标记之后，但我做错了。

js代码：

$(document).ready(function() {
    var expanded = false;
    $('#cart-button').click(function() {
        if (!expanded) {
            $(this).animate({ 'top' : '380px' }, { duration : 400 });
            expanded = true;
        }
        else {
            $(this).animate({ 'top' : '226px' }, { duration: 400 });
            expanded = false;
        }
    });
});

Answer 1

您可以通过在动画完成后调用匿名函数来执行此操作：

对于你的if语句：

$(this).animate({top: '380px'}, 400, function() { // anonymous function
    $('#cart-button').css({cursor: 'default'}); // sets cursor to default immediately after animation completes
});
expanded = true;

和你的其他声明：

$(this).animate({top: '226px'}, 400, function() {
    $('#cart-button').css({cursor: 'default'});
});
expanded = false;

我相信＆＃34;正常＆＃34; css中的光标称为默认，因此您需要将其设置为。

我也更改了代码的一些格式，但随意使用您喜欢的任何方式。

jquery如何在动画后更改光标？

1 个答案: