觸發一個JQuery動畫函數並循環它？

我想要做的是（大概）相對簡單，但讓我對jquery/Javascript的理解（無可厚非）感到失望。觸發一個JQuery動畫函數並循環它？

目標很簡單 - 我想在特定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 is not a function

我完全失去了，有點在這裏我的深度，所以任何指針讚賞！

來源

2017-01-15 Lee

'animateSec1BG'是一個jQuery插件？ –

您必須在腳本中簡單調用'animateSec1BG（）'。 –

CSS動畫的另一種解決方案; （這個動畫改回顏色。如果你想，替換背景圖像元素的背景色元素）

$.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>

來源

2017-01-15 20:25:44

謝謝！我最初嘗試使用CSS動畫作爲我的首選選項，但無論出於何種原因，它都無法正常工作。然而，你的樣品呢。 – Lee

該函數在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);

來源

2017-01-15 20:23:08

觸發一個JQuery動畫函數並循環它？

回答

相關問題