Как получить .toggleClick для возврата переключателя с разными элементами

0

У меня есть столбец с одним и тем же классом. Я использую плагин Toggle Click для анимации окна left: 100px когда он 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)
            });
        });
    };
  • 0
    Как это: jsfiddle.net/ksMZ7 Надеюсь, что это исправить ваши потребности! :)
Теги:
animation

1 ответ

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
        });
    }
});

Демо: скрипка

  • 0
    Благодарю. Не могли бы вы объяснить, как это работает немного. В частности, почему вы создали переменную для $(this) и какова цель строки parseFloat? Я думаю, что он используется для отделения значения left свойства от «px», которое будет возвращено вместе с ним, но я не понимаю, что такое || 0 для. Я не знал, что переменная может быть двумя вещами.
  • 0
    @UncleSlug переменная $this создана, потому что мы используем $(this) несколько раз в коде, поэтому будет лучше кэшировать ее значение с помощью переменной
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню