如何實現這個動畫？

我想實現這個淘汰賽簡單的動畫：如何實現這個動畫？

function scroll(back) { 
    var scrollContainer = $('.scrollingContent'); 
    var newContent = $("<div class='content'></div>"); 
    var oldContent = scrollContainer.children().first(); 
    newContent.css("width", "50%"); 
    var contentSize = oldContent.width(); 
    var newContentColor = oldContent.css("background-color") == "rgb(255, 0, 0)" ? 
                   "green" : "red"; 
    newContent.css("backgroundColor", newContentColor); 
    if (back) { 
     newContent.css("margin-left", -contentSize); 
     scrollContainer.prepend(newContent); 
     newContent.animate({ "margin-left": 0 }, 600, 
     function() { oldContent.remove(); }); 
    } else { 
     scrollContainer.append(newContent); 
     oldContent.animate({ "margin-left": -contentSize }, 600, 
     function() { oldContent.remove(); }); 
    } 
}

實例可以在這裏被看作：http://jsfiddle.net/VMx3j/106/

我已經讀了很多關於自定義綁定，但我仍然不知道如何做對了。

我只有兩個想法。首先是創建一個foreach數組並綁定在afterRender，afterAdd或beforeRemove上。但它會是正確的嗎？我認爲在這種情況下的代碼將不會被理解，並且很難改變任何事情。另一個想法是創建一個自定義綁定。但據我瞭解，這種方法只適用於一種元素，我至少需要訪問其中的兩種元素。

另請注意，內容元素是模板（通過此動畫不斷更改）。

如果您對此有任何意見，請幫忙。

來源

2012-10-24 Zelzer

@mcpDESIGNS我不能因爲以前的問題都沒有得到很好的回答。 – Zelzer

下面是正確答案：

this.afterElementAdd = function(element) { 
    if (element.nodeType === 1) { 
     var el = $(element); 
     if (el.next().length != 0 && el.prev().length == 0) { 
      el.animate({ "margin-left": "0" }, 300, function() { 
       self.contents.pop(); 
      }); 
     } 
     else if (el.prev().length != 0 && el.next().length == 0) { 
      el.prev().animate({ "margin-left": -el.width() }, 300, function() { 
       self.contents.shift(); 
      }); 
     } 
    } 
};

來源

2012-10-25 15:08:37 Zelzer

我希望我明白你願意做什麼。這將是一個圖片旋轉木馬，對不對？ :)

是的，爲元素做一個數組！

<script> 
var $pics = $('#pics img'); // Get all img elements (this is an array/object !) 
var i = 0;     // Index starts with zero 
var len = $pics.length;  // How many pictures we have 

var $curr = $pics.eq(i);      // Access current element 
var $next = $pics.eq(i+1 == len ? 0 : i+1); // Access next element 
var $prev = $pics.eq(i == 0 ? len-1 : i-1); // Access previous element 
</script>

我相信現在你會知道該怎麼做。 :)

來源

2012-10-24 15:18:15 Taai

如何實現這個動畫？

回答

相關問題