Question

我想要做的事情（大概）是相对简单的，但是对我对jquery / Javascript的理解很糟糕。

目标很简单 - 我希望“动画”特定div上背景图像的不透明度（最终我会将其应用于页面上的其他人，根据正在查看的部分开始/停止动画 - 它是一个水平滚动的页面，分为“面板”，观众使用＆lt;＆amp;＆gt;按钮或命名链接进行导航。

这是我到目前为止的脚本（单独的.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>

触发JQuery动画功能＆amp;循环吗？

2 个答案: