jquery - 动画和重置间隔

Question

我对 jquery 有点陌生，需要一些帮助，我在网上搜索解决方案并尝试对其进行编辑以满足我的要求。我想要的是一个更改背景事件，并且内容内部还有一个滑块，当更改控件时，背景也会更改。我已经做到了，但我遇到了两个问题：

1. 我需要在单击时重置间隔（现在将其混合）
2. 我需要为直接更改的背景设置动画（缓动或淡入淡出）

这是代码：-

$(window).load(function(){
    var images = ['images/background/body-bg.jpg','images/background/body-bg2.jpg'];
    var i = 0;

    function changeBackground() {
        $('html').css({
            'background': function(){
                             if (i >= images.length) {
                                i=0;
                            }
                            return 'url(' + images[i++] + ')';

                        },
            'background-position':'center',
            'background-attachment':'fixed',
            'background-size':'cover'
        })
    }

    // Call it on the first time
    changeBackground();

    (function(){
        $('.sliderControl > li').children().on('click', function(){
            changeBackground();
            window.clearInterval()
        })
    })();

    // Set an interval to continue
    setInterval(changeBackground, 5000);

});

Answer 1

using js tween library you acheive this easily

http://www.jstween.org/

                          {
            id: "JSframe1",
            //audio: "<filename and path, without extension>",
            play: function(JQtarget, FNcallback) {
                JQtarget.find(".JSimage1").tween({



                        transform:{
                            start: 'rotate(0deg) scale( 1 )',
                            stop: 'rotate(360deg) scale( 1 )',
                            time: 0,
                            duration: 1,
                            effect:'linear'
                            },
                            width: {
                            start: 1,
                            stop: 100,
                            time: 0,
                            duration: 1,
                            units: '%'

                            },
                            height: {
                            start: 1,
                            stop: 100,
                            time: 0,
                            duration: 1,
                            units: '%'
                            },


                });
                setTimeout(FNcallback, 7000);
                $.play();
            }
        },