簡化jquery不起作用

我想使用一個名爲easeInBounce的緩動jQuery函數，但它不工作。我搜索了所有關於這一點的信息，所有頁面都說我必須像這樣放{easing:'easeInBounce'}，但它不起作用。簡化jquery不起作用

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 

<div>Push!</div> 
<input type="text"> 
<input type="text" class="middle"> 
<input type="text"> 

<script> 
    $("div").ready(function() { 
     $(this).css({ 
      borderStyle: "inset", 
      cursor: "wait" 
     }); 
     $("input").slideDown({easing: 'easeInBounce'}, 1000, function() { 
      $(this) 
        .css("border", "2px red inset") 
        .filter(".middle") 
        .focus(); 
      $("div").css("visibility", "hidden"); 
     }); 
    }); 

</script>

正如你所看到的，我已經改變了點擊和我把.ready加載頁面時加載效果。

這不起作用，我不知道該怎麼做。

感謝

來源

2014-10-05 Javi Pérez

你爲什麼不做小提琴 – 2014-10-05 00:32:57

我不明白你......什麼是小提琴？ – 2014-10-05 00:34:24

這裏你去：http://www.jsfiddle.net設置你的環境和代碼並保存它，然後發回鏈接。 – 2014-10-05 00:36:27

唯一緩解了jQuery庫實現是默認的，所謂的搖擺，以及一個進步以恆定的速度，稱爲線性。通過使用插件，最顯着的是jQuery UI套件，可以使用更多的緩動功能。

你需要下載jQuery UI的太 - http://api.jqueryui.com/easings/

來源

2014-10-05 00:40:30 Cheery

它不工作，因爲easeInBounce功能不是jQuery庫的一部分。 swing和linear是jQuery庫中包含的唯一緩動函數。

您可以包含jQueryUI或jQuery緩動插件，但這些可能是矯枉過正的，因此您可以將任何相關的緩動功能直接放入代碼中。

$(document).ready(function() { 

    $.easing.easeInBounce = function (x, t, b, c, d) { 
     return c - $.easing.easeOutBounce (x, d-t, 0, c, d) + b; 
    }; 
    $.easing.easeOutBounce = function (x, t, b, c, d) { 
     if ((t/=d) < (1/2.75)) { 
      return c*(7.5625*t*t) + b; 
     } else if (t < (2/2.75)) { 
      return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; 
     } else if (t < (2.5/2.75)) { 
      return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; 
     } else { 
      return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; 
     } 
    }; 

    // now you can use it 

    ....

參見：jQuery easing functions without using a plugin

來源

2014-10-05 00:51:21 Sparky

你爲什麼不使用.animate()與jquery.easing.min.js.easeInBounce影響？

使用它這樣的：http://jsfiddle.net/csdtesting/d88z6ur5/

$("div").ready(function() { 

    $(this).css({ 
     borderStyle: "inset", 
     cursor: "wait" 
    }); 

    //$('#showme').fadeIn("easeInBounce"); 
    $('#showme').animate({ 
     top: '-=100px' 
    }, 500, 'easeOutBounce', function() { // Animation complete. 
     $(this) 
      .css("border", "2px red inset") 
      .filter(".middle") 
      .focus(); 
     $("div").css("visibility", "hidden"); 
    }); 

});

希望它能幫助！

來源

2014-10-05 00:59:03

你應該提到，仍然需要jQuery緩動插件來做easeInBounce，因爲他不知道他的問題，並且可能不知道jsfiddle中包含的所有細節 – Macsupport 2014-10-05 02:42:32

你是對的。我確實知道，謝謝 – 2014-10-05 08:21:34

簡化jquery不起作用

回答

相關問題