jQuery的背景變化位置

我是新來的JavaScript和jQuery，所以我試圖讓一個滑動的背景和我做出的唯一方式，它的工作是：jQuery的背景變化位置

$('.mainTitles').click(function() { 
    var self = $(this); 

    if (!self.hasClass('toggled')) { 

     setTimeout(function func() { 
      self.css({ 
       'background-position-y': '20%' 
      }); 
     }, 25); 
     setTimeout(function func() { 
      self.css({ 
       'background-position-y': '40%' 
      }); 
     }, 50); 
     setTimeout(function func() { 
      self.css({ 
       'background-position-y': '60%' 
      }); 
     }, 75); 
     setTimeout(function func() { 
      self.css({ 
       'background-position-y': '80%' 
      }); 
     }, 100); 
     setTimeout(function func() { 
      self.css({ 
       'background-position-y': '100%' 
      }); 
     }, 125); 

     self.addClass('toggled'); 

    } else { 

     setTimeout(function func() { 
      self.css({ 
       'background-position-y': '80%' 
      }); 
     }, 25); 
     setTimeout(function func() { 
      self.css({ 
       'background-position-y': '60%' 
      }); 
     }, 50); 
     setTimeout(function func() { 
      self.css({ 
       'background-position-y': '40%' 
      }); 
     }, 75); 
     setTimeout(function func() { 
      self.css({ 
       'background-position-y': '20%' 
      }); 
     }, 100); 
     setTimeout(function fun() { 
      self.css({ 
       'background-position-y': '0' 
      }); 
     }, 125); 

     self.removeClass('toggled'); 
    } 

});

我有種想窩的setTimeout在循環中但沒有結果。有人可以提到正確的方法來做到這一點，沒有那堆愚蠢的代碼。謝謝！順便說一句，jquery animate沒有爲我工作，因爲我希望它在步驟不平穩改變。

來源

2013-06-03 zogby

可以使用step -callback從jQuery.fn.animate到動畫background-position三支有類似的效果。然後使用jQuery.fn.toggleClass添加/刪除州級。根據這一點，你可以激活你的背景：

$("body").click(function() { 
    var $self = $(this).toggleClass("toggled"); 
    var toggled = $self.hasClass("toggled"); 
    var pos = toggled ? 0 : 100; 

    $({bg: pos}).animate({bg: 100 - pos}, { 
     step: function(now){ 
      $self[0].style.backgroundPosition = "0 " + now + "%"; 
     } 
    }); 
});

http://fiddle.jshell.net/69PrJ/

來源

2013-06-03 10:43:43 yckart