2013-04-09 49 views
0

我有點新的jQuery和需要一些幫助,我搜索瞭解決方案的網絡,並試圖編輯它,以滿足我的要求。我想要的是更改背景事件,並且內容中還有一個滑塊,當更改控件時,背景也會改變。我已經做到了,但我有2個問題:動畫和重置間隔

  1. 我需要重新設置間隔時,其點擊(現在它 混合起來)
  2. 我需要動畫背景的變化insted的 變化的直接(或易於褪色)

這裏是代碼: -

$(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); 

}); 

回答

0

使用JS吐溫庫您達致這很容易

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(); 
      } 
     },