Question

我在我的应用程序中使用FullCalendar。我删除了用于更改插件提供的视图的默认按钮，而是单击我使用changeView属性在agendaWeek和agendaDay视图之间切换的点击。

但这种变化非常突然。所以我想知道是否有任何可以帮助我使用JQuery应用一些过渡动画。

感谢。

Answer 1

在您的下一个，上一个和今天的点击功能中，您可以应用jquery slideToggle为日历设置动画：

        nextButtonClick: function () {
            viewModel.animateCalendar();
            $('#calendar').fullCalendar('next');
        },
        previousButtonClick: function () {
            viewModel.animateCalendar();
            $('#calendar').fullCalendar('prev');                
        },
        todayButtonClick: function () {
            viewModel.animateCalendar();
            $('#calendar').fullCalendar('today');                
        },
        animateCalendar: function () {
            // try and animate transition
            $('#calendar').slideToggle();
            $('#calendar').slideToggle();
        },

默认情况下会将其向上滑动然后再向下滑动，但您可以添加参数来更改方向，速度等。http://api.jquery.com/slideToggle/

希望这有帮助。

Answer 2

您可以使用fadeOut并在完整功能中再次显示日历并更改视图。

代码：

$('#mycalendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title'
    },
    editable: true,
    events: [{
        title: 'event1',
        start: '2014-05-02'
    }, {
        title: 'event2',
        start: '2014-05-10'
    }]
});

$("#change").click(function () {
    $('#mycalendar').fadeOut("slow", function () {
        $('#mycalendar').show();
        $('#mycalendar').fullCalendar('changeView', 'basicWeek')
    });
});

演示：http://jsfiddle.net/IrvinDominin/A7Vc6/

JQuery FullCalendar：Animate View Change / Toggle

2 个答案: