javascript - Jquery Mobile 不透明度不起作用 :(

Question

如何让这个按钮在 jQuery mobile 上跳动？

jQuery mobile 是否存在问题，因为在我的主应用程序中的某些 div 上，我可以应用这种脉动效果，而在其他 div 上，它们只是闪烁，或者淡入淡出，或者淡入淡出。

html:

<button id="pulsate">I want to pulsate!</button>

JS:

    $('#pulsate').on('click', function () {
        pulsate("#pulsate");
    });


function pulsate(element) { 
    $(element || this).animate({ opacity: 0 }, 500, function() { 
       $(this).animate({ opacity: 1 }, 500, pulsate); }); 
} 

http://jsfiddle.net/alecstheone/zCUSK/

我只使用 jquery 和 jquerymobile...我注意到，如果我在 jsfiddle 中禁用 jquerymobile，它会起作用，但我不希望这样，因为我在应用程序中使用 jquerymobile 来做其他事情...

Answer 1

您的代码工作正常，但您必须对脚本进行一些更改，因为您在按钮上有一个单击事件，但使用 jQuery mobile，您的按钮被 span 和 divs(主要是因为jquery mobile css)，

所以你只需要使用 .closest() 遍历该目标 div设置你的动画效果。
下面是您的代码的小演示，具有所需的效果。

$('#pulsate').on('click', function () {
    pulsate(this); // Change here
});

function pulsate(element) {
    $(element || this).closest("div.ui-btn").animate({
        opacity: 0
    }, 500, function () {
        $(this).closest("div.ui-btn").animate({
            opacity: 1
        }, 500, pulsate);
    });
}

Fiddle Example