Внедрение эффекта jake-эффекта jQuery с анимацией

Question

Мне предоставлено подрезанное подмножество jQuery lib, одна из ключевых функций, которые мне не хватает, - это функции .effect. Однако у меня есть .animate. Мне было интересно, есть ли у кого-нибудь идеи, как я могу воспроизвести функции анимации.

Я особенно заинтересован в том, чтобы сделать это всего несколько строк, поскольку мне нужно сохранить размер кода. Именно поэтому jquery lib настолько мал, насколько он есть, и не имеет функций эффектов.

TLDR - Я пытаюсь заменить

$("#"+id_string).effect("shake", {}, "fast"); 

С чем-то с помощью .animate в JQuery.

Answer 1

На самом деле это уже реализовано под обложками, вы можете точно видеть, как в jquery.effects.shake.js, если вы хотите скопировать только ту функциональность, которую вы можете.

Другой подход к размышлению: если вы используете несколько эффектов, я бы рекомендовал downloading jQuery UI with only the effects you want. Для этого эффекта, не копируя функциональность самостоятельно, вам просто понадобятся jquery.effects.core.js и jquery.effects.shake.js.

Answer 2

До сих пор у меня есть что-то вроде этого ..

jQuery.fn.shake = function(intShakes, intDistance, intDuration) { 
    this.each(function() { 
     $(this).css("position","relative"); 
     for (var x=1; x<=intShakes; x++) { 
     $(this).animate({left:(intDistance*-1)}, (((intDuration/intShakes)/4))) 
    .animate({left:intDistance}, ((intDuration/intShakes)/2)) 
    .animate({left:0}, (((intDuration/intShakes)/4))); 
    } 
    }); 
return this; 
}; 

Answer 3

Это не идеально, но функциональный

// Example: $('#<% =ButtonTest.ClientID %>').myshake(3, 120, 3, false); 
    jQuery.fn.myshake = function (steps, duration, amount, vertical) { 
     var s = steps || 3; 
     var d = duration || 120; 
     var a = amount || 3; 
     var v = vertical || false; 
     this.css('position', 'relative'); 
     var cur = parseInt(this.css(v ? "top" : "left"), 10); 
     if (isNaN(cur)) 
      cur = 0; 

     var ds = d/s; 

     if (v) { 
      for (i = 0; i < s; i++) 
       this.animate({ "top": cur + a + "px" }, ds).animate({ "top": cur - a + "px" }, ds); 
      this.animate({ "top": cur }, 20); 
     } 
     else { 
      for (i = 0; i < s; i++) 
       this.animate({ "left": cur + a }, ds).animate({ "left": cur - a + "px" }, ds); 
      this.animate({ "left": cur }, 20); 
     } 

     return this; 
    } 

Answer 4

Я не понимаю всю сложность броска в воспроизводя эффект дрожания с только animate. Вот мое решение всего за пару строк.

function shake(div,interval=100,distance=10,times=4){ 
    $(div).css('position','relative'); 
    for(var iter=0;iter<(times+1);iter++){ 
     $(div).animate({ left: ((iter%2==0 ? distance : distance*-1))}, interval); 
    }//for 
    $(div).animate({ left: 0},interval); 
}//shake 

EDIT: Обновлен код для возврата элемента в исходное положение. По-прежнему считайте, что это самое легкое и лучшее решение проблемы.

Answer 5

Это, вероятно, сейчас не имеет значения, но я портировал эффект jQ UI в качестве отдельного плагина jQuery. Все, что вам нужно, это jQuery, и оно будет работать точно так же, как и в jQ UI.

Для тех, кто хочет использовать эффект без фактического вздутия своего проекта ненужными файлами ядра JQ UI.

$('#element').shake({...});

Он может быть найден здесь с инструкцией: https://github.com/ninty9notout/jquery-shake

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

Answer 6

я написал некоторое время назад несколько простых JQuery анимации:

https://github.com/yckart/jquery-custom-animations

/** 
* @param {number} times - The number of shakes 
* @param {number} duration - The speed amount 
* @param {string} easing - The easing method 
* @param {function} complete - A callback function 
*/ 
jQuery.fn.shake = 
jQuery.fn.wiggle = function (times, duration, easing, complete) { 
    var self = this; 

    if (times > 0) { 
     this.animate({ 
      marginLeft: times-- % 2 === 0 ? -15 : 15 
     }, duration, easing, function() { 
      self.wiggle(times, duration, easing, complete); 
     }); 
    } else { 
     this.animate({ 
      marginLeft: 0 
     }, duration, easing, function() { 
      if (jQuery.isFunction(complete)) { 
       complete(); 
      } 
     }); 
    } 
    return this; 
}; 

Answer 7

Это более чистый и гладкий способ сделать анимацию.

jQuery.fn.shake = function(shakes, distance, duration) { 
    if(shakes > 0) { 
     this.each(function() { 
      var $el = $(this); 
      var left = $el.css('left'); 
      $el.animate({left: "-=" + distance}, duration, function(){ 
       $el.animate({left: "+=" + distance * 2}, duration, function() { 
        $el.animate({left: left}, duration, function() { 
         $el.shake(shakes-1, distance, duration); });}); 
      }); 
     }); 
    } 
    return this; 
}; 

Answer 8

Мне так нравится решение @phpslightly, я продолжаю его использовать.Так вот она обновляется основной Jquery форме плагина, который будет возвращать ваш элемент

jQuery.fn.shake = function(interval,distance,times){ 
    interval = typeof interval == "undefined" ? 100 : interval; 
    distance = typeof distance == "undefined" ? 10 : distance; 
    times = typeof times == "undefined" ? 3 : times; 
    var jTarget = $(this); 
    jTarget.css('position','relative'); 
    for(var iter=0;iter<(times+1);iter++){ 
     jTarget.animate({ left: ((iter%2==0 ? distance : distance*-1))}, interval); 
    } 
    return jTarget.animate({ left: 0},interval); 
} 

Вы бы затем использовать его как обычный плагин:

$("#your-element").shake(100,10,3); 

Или использовать значения по умолчанию (100, 10, 3):

$("#your-element").shake(); 

Answer 9

Основываясь на решении производителя @el, я добавил несколько логических умножений и сделаю их похожими на случайное дрожание.

jQuery.fn.shake = function (interval, distance, times) { 
    interval = typeof interval == "undefined" ? 100 : interval; 
    distance = typeof distance == "undefined" ? 10 : distance; 
    times = typeof times == "undefined" ? 3 : times; 
    var jTarget = $(this); 
    jTarget.css('position', 'relative'); 
    for (var iter = 0; iter < (times + 1) ; iter++) { 
     jTarget.animate({ top: ((iter % 2 == 0 ? distance * Math.random() : distance * Math.random() * -1)), left: ((iter % 2 == 0 ? distance * Math.random() : distance * Math.random() * -1)) }, interval); 
    } 
    return jTarget.animate({ top: 0 , left: 0 }, interval); 
}