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 移动您的按钮被 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