0

この単純なアニメーションをノックアウトで実装したいと思います。

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/

カスタムバインディングについてたくさん読んだことがありますが、それを正しく行う方法がまだわかりません。

私には2つのアイデアしかありませんでした。最初は、foreach配列を作成し、afterRender、afterAdd、またはbeforeRemoveにバインドすることでした。しかし、それは正しいでしょうか？この場合のコードは十分に理解できず、何かを変更するのは非常に難しいと思います。また、別のアイデアは、カスタムバインディングを作成することでした。しかし、私が理解している限り、このアプローチは1つの要素でのみ機能し、少なくとも2つの要素にアクセスする必要があります。

また、コンテンツ要素がテンプレートであることに注意してください（これはこのアニメーションによって常に変更されます）。

あなたがそれについて何か考えを持っているならば、助けてください。

4

2 に答える 2

0

私はあなたが喜んで何をしてくれるかを理解したと思います。絵のカルーセルになりますよね？:)

はい、要素の配列を作成してください！

<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-24T15:18:15.377 に答える
0

正解は次のとおりです。

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-25T15:08:37.037 に答える