使用带有“慢速”选项的切换时功能中断

Functionality breaks when using toggle with 'slow' option

本文关键字：中断 功能 选项 慢速      更新时间：2023-09-26

问题是，当我使用没有任何选项的切换功能时，即默认选项，项目上的"is（'：visible'）'会返回正确的状态。

但是，当我使用 toggle（"slow"）时，它会显示不正确的状态，并且始终将切换操作的项目显示为可见的 false。当然，我正在回调函数中检查它，以确保动画是完整的。

请看下面的代码

jQuery(document).ready(function () {
    var h3 = jQuery("#myAccordion").find('h3');
    jQuery("#myAccordion").find('h3').find('span').addClass("ui-state-active ui-icon");
    jQuery.each(h3, function () {
        jQuery(this).bind('click', function () {
            jQuery(this).next('div').toggle("slow", "swing", callback);
        });
    });
});
function callback () {
    if (jQuery(this).next('div').is(':visible')) {
        alert('visible--' + jQuery(this).next('div').is(':visible'));
        jQuery(this).find('span').removeClass("ui-state-default ui-icon").addClass("ui-state-active ui-icon");
    }
    else {
        alert('visible--' + jQuery(this).next('div').is(':visible')); // always goes into this 'else' even though the item is visible.
        jQuery(this).find('span').removeClass("ui-state-active ui-icon").addClass("ui-state-default ui-icon");
    }
}

但是，当不使用带有切换的"慢速"选项时，同样可以正常工作。

更新 2：在这里查看这个 http://jsfiddle.net/tariquasar/7xt7D/2/

任何指针...

更新1：这是小提琴 http://jsfiddle.net/tariquasar/7xt7D/

上下文

this也不会扩展到callback函数。你可以尝试这样做。我已经更新了jsfiddle（点击这里）。我在这里粘贴相同的内容。

jQuery(document).ready(function () {
    var h3 = jQuery("#myAccordion").find('h3');
    jQuery("#myAccordion").find('h3').find('span').addClass("ui-state-active ui-icon"); // first the item is visible
    jQuery.each(h3, function () {
        jQuery(this).bind('click', function () {
console.log(this);
            jQuery(this).next('div').toggle("slow","swing",callback(this));
        });
    });
});
function callback (that) {
    setTimeout( function () {
        console.log(jQuery(that).next('div').is(':visible'));
    if (jQuery(that).next('div').is(':visible')) {
        alert('visible--' + jQuery(that).next('div').is(':visible'));
        jQuery(that).find('span').removeClass("ui-state-default ui-icon").addClass("ui-state-active ui-icon");
    }
    else {
        alert('visible--' + jQuery(that).next('div').is(':visible'));
        jQuery(that).find('span').removeClass("ui-state-active ui-icon").addClass("ui-state-default ui-icon");
    }
    }, 1000);
}

我添加了一个SetTimeout来获得您想要的结果。回调函数在动画完成后调用。是的。但不是在 CSS 更改为 display:none 之后。CSS 更改发生在几毫秒后。

但是，当不使用带有切换的"慢速"选项时，同样可以正常工作。

我不太确定您如何让它与慢速以外的选项一起工作

相关文章：