У меня есть столбец с одним и тем же классом. Я использую плагин 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)
});
});
};
В этом случае вы не хотите использовать 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
});
}
});
Демо: скрипка
$(this)
и какова цель строки parseFloat? Я думаю, что он используется для отделения значения left
свойства от «px», которое будет возвращено вместе с ним, но я не понимаю, что такое || 0
для. Я не знал, что переменная может быть двумя вещами.
$this
создана, потому что мы используем $(this)
несколько раз в коде, поэтому будет лучше кэшировать ее значение с помощью переменной
:)