javascript – jquery点击回调

2019-06-13 23:25:12 阅读：108 来源： 互联网

我有一个由’click’处理程序触发的jquery函数：

$('#showDatesCheckbox').click(function(){
    var table = $('#planningViewTable').find('tr');
    if ($('#showDatesCheckbox').is(':checked')) {
        table.find('.textDate').stop().animate({
            "opacity": 1
        }, 1000);
        table.find('.inlineTextDate').stop().animate({
            "opacity": 1
        }, 1000);
    }
    else {
        table.find('.textDate').stop().animate({
            "opacity": 0
        }, 1000);
        table.find('.inlineTextDate').stop().animate({
            "opacity": 0
        }, 1000);
    }
});

我想要一个ajax加载指示器动画,所以我需要它来显示触发点击的时间,并在操作完成时隐藏,所以我想回调但是当我按如下方式设置它时似乎没有工作：

$('#showDatesCheckbox').click(function(){
            $('#planningView').mask('Loading...');
    var table = $('#planningViewTable').find('tr');
    if ($('#showDatesCheckbox').is(':checked')) {
        table.find('.textDate').stop().animate({
            "opacity": 1
        }, 1000);
        table.find('.inlineTextDate').stop().animate({
            "opacity": 1
        }, 1000);
    }
    else {
        table.find('.textDate').stop().animate({
            "opacity": 0
        }, 1000);
        table.find('.inlineTextDate').stop().animate({
            "opacity": 0
        }, 1000);
    }
},  
    $('#planningView').unmask();
);

解决方法:

click事件立即触发,持续时间为0,因此没有任何回调.

但是你正在使用的动画,确实有持续时间,所以它有一个回调.你的回调函数应该在.animate中：

$('#showDatesCheckbox').click(function(){
    $("#foo").animate({ opacity: 1 }, 1000, function(){
        // your callback
    });
});

但是你正在使用多个动画,所以我想你希望在所有这些动画完成“动画”时调用你的回调函数.这是我会做的：

$('#showDatesCheckbox').click(function(){
    var callback_count = 2; // the number of animates you do before you want to actually call your callback function
    var yourCallbackFunction = function(){
        if(--callback_count <= 0){
            // your callback
        }
    }
    $("#foo").animate({ opacity: 1 }, 1000, yourCallbackFunction);
    $("#bar").animate({ opacity: 1 }, 1000, yourCallbackFunction);
});

还有一件事你应该知道：调用.animate来改变不透明度是很好的,但是如果你只改变不透明度,有一种方法只做那个,并且还有一个回调：fadeIn()和fadeOut().

标签：jquery,javascript
来源： https://codeday.me/bug/20190613/1235907.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – jquery点击回调