触发一个Jani动画函数并循环吗？

Question

我想做的是（大概）相对简单，但是由于对jquery / Javascript的理解（很差）而失望。

目标很简单-我想“动画化”特定div上背景图片的不透明度（最终，我将其应用于页面上的其他对象，并根据查看的部分开始/停止动画-它是水平滚动的页面分为“面板”，观众可以使用<＆>按钮或命名的链接进行导航）。

这是我到目前为止的脚本（单独的.js文件，在index.html中引用）；

jQuery(document).ready(function($) {
"use strict";

function animateSec1BG() {
$('#section1').animate({
                opacity: 0,
            }, 1000, function () {
                $("#section1").css({ 'background-image': 'url(images/SlideBG-1.jpg)' }).animate({ opacity: 1 }, 1000);
});


}
});

没有报告任何错误（Dreamweaver CC，代码视图）。 在index.html的底部，加载完所有脚本后，我有了这个。

<script type="text/javascript">
     $("#section1").animateSec1BG();
</script>

（我认为不需要“＃section1”位-如果没有它，代码就不会“看起来”正确，但是无论哪种方式都无法工作！）。

错误返回状态：

TypeError：$（...）。animateSec1BG不是函数

我完全迷失了自己，在这里有些牵强，所以非常感谢任何指针！

Answer 1

该函数在jQuery范围内定义，而不是全局的。 将函数添加到jQuery，如下所示：

jQuery.fn.animateSec1BG = function() {

    $('#section1').animate({
        opacity: 0,
    }, 1000, function() {
        $("#section1").css({
            'background-image': 'url(images/SlideBG-1.jpg)'
        }).animate({
            opacity: 1
        }, 1000);

    });

}

由于选择器是硬编码的，因此您只需定义全局功能，然后在ROM准备就绪时执行即可。

function animateSec1BG() {
   // code
}

并命名为animateSec1BG() 。 至于循环，您可以使用setInterval()在一定间隔内调用该函数

setInterval(animateSec1BG, 1000);

Answer 2

CSS动画的另一种解决方案； （此动画更改了背景色。如果需要，可将background-color元素替换为background-image元素）

 $.fn.animateSec1BG = function (state){ if(state) $('#section1').addClass("sample"); else $('#section1').removeClass("sample"); }; $(document).ready(function() { $("#section1").animateSec1BG(true); }); 

 .sample { width:100px; height:20px; background:red; animation:myfirst 1s; -moz-animation:myfirst 1s infinite; /* Firefox */ -webkit-animation:myfirst 1s infinite; /* Safari and Chrome */ } @-moz-keyframes myfirst /* Firefox */ { 0% {background:red;} 50% {background:yellow;} 100% {background:red;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red;} 50% {background:yellow;} 100% {background:red;} } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section id="section1"> Some info and etc. </section>