Вставьте форму входа в систему при ошибке

Question

Я успешно создал форму входа с помощью ajax и хочу добавить эффект дрожания в форму, когда пользователь вводит неверные данные. У меня есть функция, которая будет срабатывать, но просто нужно создать эффект jQuery (обратите внимание, что я знаю пользовательский интерфейс jquery, но не хочу его использовать! Я не хочу использовать для этого ЛЮБЫЕ плагины)

до сих пор у меня есть:

function shakeForm() { 

    var p = new Array(15, 30, 15, 0, -15, -30, -15, 0); 
    p = p.concat(p.concat(p)); 


    $('form').css('left',p); 

} 

из того, что я понимаю, что нужно в цикле массив значений, но как я могу это сделать? Обратите внимание, что форма элемента уже имеет относительную позицию. Таким образом, это всего лишь случай, когда эти значения используются как левое значение в случайной последовательности?

Благодаря

Answer 1

Зачем? Анимация в очереди. больше - вместо этого left атрибут можно использовать margin-left что мешает добавлять position атрибут :)

function shakeForm() { 
    var l = 20; 

    for(var i = 0; i <= 10; i++) { 
    $('form').animate({ 
     'margin-left': '+=' + (l = -l) + 'px', 
     'margin-right': '-=' + l + 'px' 
     }, 50); 
    } 
} 

Answer 2

петли бросить массив с помощью jQuery.each: http://jsfiddle.net/N8F7Z/1/

function shakeForm() { 
    var p = "15 30 15 0 -15 -30 -15 0".split(" "); 
    $.each(p, function(key, value) { 
     var delay = 100; 
     setTimeout(function() { 
      $("form").css("left", value + "px"); 
     }, delay*key); 
    }); 
} 

Простого способ сделать массив раскалывается строка с любым пространством:

var p = "15 30 15 0 -15 -30 -15 0".split(" "); 

Задержка между каждым шаг:

var delay = 100; 

Использование setTimeout(function() {...}, theTimeBeforeFiring)

theTimeBeforeFiring = delay * key 

ключ является ключом значение имеет в массиве:

key = 0, 1, 2, 3 

Answer 3

Я сделал плагин для этого .. проверить это http://static.mbiosinformatica.com.br/jQuery/

Он работает в IE (7, 8, 9), Chrome и Firefox.

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

$('#div').shake({ 
     positions : { 'L' : 50 , 'R' : 50 } , // shake only left and right (U,L,R,D) 
     rotate : false , // rotate div on shake .. true/false 
     parent : false // shake parent div .. true/false 
}, function(){ /* do something */ }); 

В позиции, вы можете отправить массив тоже просто: positions: [ [ 'L', 50 ... ] ] Это значение '' его трясти расстояние от первоначального положения ..

---

Чтобы изменить время ожидания (задержки) и длительность эффекта, вы должны установить timeout: [you timeout ../delay ] и время воздействия. interval: ...

Answer 4

mmm зачем использовать встроенные js, если jquery animate() доступен ... вы пытаетесь повторяющееся, как это:

var p = new Array(15, 30, 15, 0, -15, -30, -15, 0); 

function shakeForm(index) { 
    if(typeof index === "undefined") index = 0; 
    if(typeof p[index] === "undefined") return false; 
    $("form").animate({ 
     "left": p[index] 
    }, function() { 
     shakeForm(index + 1); 
    }); 
} 

Answer 5

JQuery анимации в очередь по умолчанию, так что вам просто нужно позвонить animate для каждого элемента массива:

function shakeForm() { 
    var p = [15, 30, 15, 0, -15, -30, -15, 0]; 
    var x = $('form').offset().left; 
    var speed = 40; 
    $.each(p, function() { 
     $('form').animate({'left': x + this}, speed); 
    }); 
} 

Пример: http://jsfiddle.net/3qdFL/

Answer 6

Приведенные выше примеры изменения исходного положения элемента.

function shakeForm() { 
    var margin = 15; 
    var speed = 50; 
    var times = 5; 
    for(var i = 0; i < times; i++){ 
     $("form").animate({ 'margin-left': "+=" + (margin = -margin) + 'px' }, speed); 
     $("form").animate({ 'margin-right': "+=" + (margin = -margin) + 'px' }, speed); 
     $("form").animate({ 'margin-right': "+=" + (margin = -margin) + 'px' }, speed); 
     $("form").animate({ 'margin-left': "+=" + (margin = -margin) + 'px' }, speed); 
    } 
} 

демо здесь http://jsfiddle.net/UW6tN/1/

Answer 7

его лучше использовать CSS для этого вместо JS. CSS использует меньше ресурсов (быстрее) и проще. Примеры использования (и «готов к использованию»): https://daneden.me/animate/

Answer 8

Почему бы не использовать анимацию css3? на мой взгляд, меньше головы. Там так много плагинов, которые существуют, потому что многие изобретают колесо ... Я искал одно и то же, получил 20 результатов форумов и jquery-плагинов (еще один скрипт для добавления) .. но я нашел это, и он работает грубо.

не мой ответ, но это чистый css3!

CSS animation similar to Mac OS X 10.8 invalid password "shake"?

Answer 9

Для тех из вас, кто упрямый (как я) и библиотек ненависти ...

var e = document.getElementById('dividname'); 
e.style.marginLeft='8px'; 
setTimeout(function(){e.style.marginLeft='0px';},100); 
setTimeout(function(){e.style.marginLeft='8px';},200); 
setTimeout(function(){e.style.marginLeft='0px';},300); 

затем в вашем CSS:

.shakeClass{ 
    transition: margin 100ms; 
}