2013-06-06 5 views
0

Я хотел бы создать анимацию, когда пользователь нажимает кнопку. Есть две функции анимации, которые я хочу сделать при нажатии, поэтому я подумал, что буду использовать функцию переключения, которая меняет местами между двумя функциями.Как использовать функцию переключения с функцией щелчка?

Теперь проблема в том, что если я использую функцию переключения, она выполняет две функции анимации без щелчка, а также кнопка исчезает.

$('#button').toggle(
    function() { 
     $('#slider').stop().animate({"margin-right": '0'}); 
    }, 
    function() { 
     $('#slider').stop().animate({"margin-right": '50'}); 
    } 
); 

Как выполнять функции анимирования в качестве альтернативы каждый раз, когда пользователь нажимает кнопку?

+2

The '.toggle (FN1, Fn2)' функция устарела. – Alnitak

+0

@Alnitak i использовал slideToggle() для другого, но он все еще работает! – sun

ответ

0

Попробуйте это,

$('#button').on('click',function(){ 
    var mr=parseInt($('#slider').css('margin-right').replace('px',''))==0 ? 50 : 0; 
    $('#slider').stop().animate({"margin-right": mr}); 
}); 

Alernatively, 

var mr=0; 
$('#button').on('click',function(){ 
    $('#slider').stop().animate({"margin-right": mr}); 
    mr=(mr==0) ? 50 : 0; 
}); 
+0

Он подходит к margin-right = 50, но когда я снова нажимаю его, он не возвращается – sun

+0

@raj, вероятно, потому, что выход из '.css()' находится в формате «Npx», а не число. – Alnitak

+0

в любом случае, проверка текущей позиции - отличный способ проверить это. Было бы лучше иметь отдельную переменную, отслеживающую направление движения. – Alnitak

2

.toggle(fn1, fn2) функция устарела.

Лучшей альтернативой является использование функции, которая поддерживает переменную состояния, чтобы указать, является ли это «четным» щелчком или «нечетным» щелчком.

В приведенном ниже примере я использую выражение «немедленно вызываемое выражение функции», чтобы обернуть эту переменную состояния в закрытие (так что это не глобально). Вместо нечетного/четного флага я фактически использую выражение target = 50 - target для поочередного переключения целевой координаты между 0 и 50 на каждый клик.

Опрос текущей позиции элемента будет работать некорректно, потому что он пропустит нажатия кнопки, которые происходят в середине анимации.

(function() { // closure to hold state variable 
    var target = 0; 
    $('#button').on('click', function() { 
     $('#slider').stop().animate({'margin-right': target}); 
     target = 50 - target; 
    }); 
})(); 

См http://jsfiddle.net/alnitak/5daYu/

+0

Я использовал slideToggle() для другого, но он все еще работает! – sun

+0

@raj '.slideToggle' не устарел, но он будет выполнять только анимацию« показать »или« скрыть ». – Alnitak

+0

Итак. .slideToggle отличается от .toggle(), правильно? – sun

Смежные вопросы