jQuery動畫單個元素

我正在嘗試獨立動畫幾個元素。作爲開始，我嘗試了一個這樣的元素，其類別&我已經定義爲「明星」。當元素從原始位置移動800 px時，我希望它停止。我已經正確地做到了。但問題正在使它回到原來的位置。一旦元素在屏幕上可見，我希望它開始返回。目前它停在800px。如果我繼續滾動到更遠的地方，它會保持在800像素。但是當我開始向左滾動時，它立即開始向左移動。所以我看不到預期的效果。並且請告訴我是否有更好的方法來做同樣的事情。因爲我做的方式，恐怕會變得非常複雜，當我嘗試動畫更多的元素jQuery動畫單個元素

$(function() { 
var lastmove = 0; 
$("body").mousewheel(function(event, delta) { 
    this.scrollLeft -= (delta * 30); 
    var move = 0; 
    var move1 = 0; 
    if (lastmove == 0 && delta == 1) { 
     //do nothing 
    } 
    else { 
     move = (lastmove * delta * -1) + 30; 
    } 
    if ((lastmove-move) > 30) { move = move * -1; } 
    if (move > 800) { 
     move = 800; 
    } 
    var position = $("#star").position(); 
    if (position.left < 0) { move = 0; } 
    if (position.left > 800) { move = 800; } 
    lastmove = move; 
    $(".star").stop().animate({left: move}, "slow"); 
    event.preventDefault(); 
      }); 
     });

jsfiddle link

來源

2013-01-15 Saad Bashir

請在此提供示例代碼。首先，其他人不得不前往您的網站並查看來源，其次，所提供的鏈接可能會在某個時間更改，這使得此問題在未來對其他用戶無用。在jsfiddle.net中的演示非常有用 – charlietfl

注意！並做出相應更改 –

看到這個：http://jsfiddle.net/MZUhh/1/

if(this.scrollLeft > 800 && delta == 1) return false;

簡化的代碼：

$(function() { 
$("body").mousewheel(function (event, delta) { 
    this.scrollLeft -= (delta * 30); 
    if (this.scrollLeft > 800) return false; 
    $(".star").stop().animate({left: this.scrollLeft}, "slow"); 
    event.preventDefault(); 
}); 
});

Demo

來源

2013-01-15 07:34:12 Anujith

謝謝。完美的作品！但是回頭的動畫並不平坦。在滾動條到達0點時它沒有達到起點。有什麼建議嗎？有沒有更簡單的方法來做這些動畫？ –

回答更新... – Anujith

非常感謝！完美的作品。現在代碼大小也急劇下降。希望能夠類似地動畫其他元素。再一次感謝你。 –

jQuery動畫單個元素

回答

相關問題