在 jquerymobile 中切换动画答案

【问题标题】：Toggle animation in jquerymobile在 jquerymobile 中切换动画
【发布时间】：2014-06-02 22:15:03
【问题描述】：

我希望当您单击元素照片时，类任务列表淡入淡出，稍后我将添加更多动画，这就是为什么我想使用 animate 对其进行动画处理的原因，当我尝试直接在照片上设置切换并跳过绑定时，只有照片元素会消失，而不是用作任务列表的触发器。

有人知道如何在 jquery mobile 中使用切换功能吗？

$('#photo').bind("toggle", function(){
    $(".taskslist").animate({
        opacity: 1
    });
},
function(){
    $(".taskslist").animate({
        opacity: 0
    })
});

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

在vclick 上使用 animate 函数回调创建一个新动画。

$('#photo').on("vclick", function() {
    var IO = this.io ^= 1; // Toggle state 1,0,1,0...
    $(".taskslist").animate({opacity: IO ? 0 : 1}); // or inverse  1 : 0
});

【讨论】：

但是当我点击两个动画都运行时，它不会等待第二次点击
@JosefCarlsson 哦，对不起，我错过了！编辑了我的答案

【解决方案2】：

根据 OP 的要求，这是允许多个动画的更新方法。切换基于目标元素的opacity。 Demo.

$('#photo').click(function () {
    var tasklist = $('.tasklist');
    var visibility = tasklist.css("opacity");
    if (visibility == 1) {
        tasklist.animate({opacity: 0, left: 50});
    } else {
        tasklist.animate({opacity: 1, left: 0});
    };
});

这是一个使用 jQuery 的fadeToggle 的方法。看看here 的演示。

$('#photo').click(function () {
    $('.tasklist').fadeToggle("fast");
});

【讨论】：

是的，但是如果我想添加更多只有淡入淡出的动画，比如 left:100;
我创建了另一个小提琴来演示您所追求的功能。