如何获取.toggleClick以返回包含不同元素的切换

时间:2014-04-01 02:26:25

标签: javascript jquery animation

我有一列同一类的盒子。我正在使用Toggle Click插件在单击框left: 100px时为其设置动画,然后在再次单击时将其设置为动画回到其起始位置。这样可以正常工作,但我希望能够让其他框也可以作为原始框动画的触发器返回其起始位置以及动画本身。

简而言之,我从不希望在左侧动画多个框。实质上,任何单击任何框都会切换已经动画的框。我希望toggleClick脚本提供一种内置的方式来处理这个功能。但是,我对Javascript的熟练程度不足以判断这是否可行。

这是一个JSFiddle,它是我正在尝试做的非常简化的版本。我的真实代码有许多不同的动画需要切换,所以任何精益解决方案都会更好。

JSFIDDLE:http://jsfiddle.net/qusBw/2/

PLUGIN

// TOGGLE-CLICK SCRIPT //

    $.fn.toggleClick = function(){
        var methods = arguments, // store the passed arguments for future reference
        count = methods.length; // cache the number of methods 
        //use return this to maintain jQuery chainability
        return this.each(function(i, item){
            // for each element you bind to
            var index = 0; // create a local counter for that element
            $(item).click(function(){ // bind a click handler to that element
                return methods[index++ % count].apply(this,arguments); // that when called will apply the 'index'th method to that element
                // the index % count means that we constrain our iterator between 0 and (count-1)
            });
        });
    };

1 个答案:

答案 0 :(得分:2)

在这种情况下,您不想使用toggleClick,自定义点击实现就足够了

var $boxes = $(".box").click(function () {
    var $this = $(this),
        left = parseFloat($this.css('left')) || 0;
    if (left == 0) {
        $this.stop(true).animate({
            left: "100px"
        });
        $boxes.not(this).stop(true).animate({
            left: 0
        });
    } else {
        $this.stop(true).animate({
            left: 0
        });
    }
});

演示:Fiddle