11

ユーザーがカスタマイズできるWebサイトで作業しており、「バイブレーション/バズ」をDOMの要素にしたい（私の特定の場合はDIV）。アプリのアイコンを長押しするとiOSで発生するのと同じような効果が得られます（すべてのアイコンが不安定になります）。

Webで検索すると、次のjQueryライブラリが見つかりました： http ：//www.dev4web.eu/projects/jquery.vibrate/

しかし、それを使って素晴らしい効果が得られるかどうかはわかりません。

これを実装する方法について何かアイデアはありますか？

ありがとう！

4

9 に答える 9

4

次のように独自のアニメーションを実装することもできます。

function shake(){
    $('#div').animate({
        'margin-left': '-=5px',
        'margin-right': '+=5px'
    }, 200, function() {
        $('#div').animate({
            'margin-left': '+=5px',
            'margin-right': '-=5px'
        }, 200, function() {
            //and so on...
        });
    });
}
于 2013-03-19T14:27:11.567 に答える
3

最近、iOSのウィグル効果を模倣することを目的としたものを作成し、jQueryの並べ替え可能機能に加えて使用できるようにしました。コレクションの並べ替え機能を強化するために使用したtastemakerx.comでライブで見ることができます。

これが私が始めたフィドルです：http： //jsfiddle.net/jozecuervo/fv8vR/

そしてこれがCSSです：

@-webkit-keyframes shake {
    0%, 100% {-webkit-transform: translateX(0) rotate(0deg) translateY(0);}
    15%, 35%, 55%, 75%, 95% {-webkit-transform: translateX(-1px) rotate(-2deg) ;}
    25%, 45%, 65%, 85% {-webkit-transform: translateX(1px) rotate(2deg); }
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateY(1px);}    
    20%, 40%, 60%, 80% {-webkit-transform: translateY(-1px); }
}
@-moz-keyframes shake {
    0%, 100% {-moz-transform: translateX(0) rotate(0deg) translateY(0);}
    15%, 35%, 55%, 75%, 95% {-moz-transform: translateX(-1px) rotate(-2deg) ;}
    25%, 45%, 65%, 85% {-moz-transform: translateX(1px) rotate(2deg); }
    10%, 30%, 50%, 70%, 90% {-moz-transform: translateY(1px);}    
    20%, 40%, 60%, 80% {-moz-transform: translateY(-1px); }  
}

@-o-keyframes shake {
     0%, 100% {-o-transform: translateX(0) rotate(0deg) translateY(0);}
    15%, 35%, 55%, 75%, 95% {-o-transform: translateX(-1px) rotate(-2deg) ;}
    25%, 45%, 65%, 85% {-o-transform: translateX(1px) rotate(2deg); }
    10%, 30%, 50%, 70%, 90% {-o-transform: translateY(1px);}    
    20%, 40%, 60%, 80% {-o-transform: translateY(-1px); }  
}

@keyframes shake {
    0%, 100% {transform: translateX(0) rotate(0deg) translateY(0);}
    15%, 35%, 55%, 75%, 95% {transform: translateX(-1px) rotate(-2deg) ;}
    25%, 45%, 65%, 85% {transform: translateX(1px) rotate(2deg); }
    10%, 30%, 50%, 70%, 90% {transform: translateY(1px);}    
    20%, 40%, 60%, 80% {transform: translateY(-1px); }  
}
.shake {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -o-animation-name: shake;
    animation-name: shake;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;    
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-transition-timing-function:linear;    
}
于 2013-12-18T08:59:13.210 に答える
3

jqueryのプラグインを使用します。

$('#loginL').effect('shake');
于 2015-04-22T19:22:09.010 に答える
3

これがあなたが探していることをするJavascriptです。

var times = 10;
var duration = 200;
for (var i = 0; i < times; i++)
    $('div#shake-it').animate({
        left: (i % 2 === 0 ? "-" : "+") + "=50"
    }, duration);

他の多くのソリューションと同様に、jQueryライブラリが必要です。ただし、他のプラグインは必要ありません。

于 2015-06-22T15:27:02.590 に答える
2

「jQueryClassyWiggleを使用すると、iPhoneのウィグル効果アイコンを長押ししたときにエミュレートできます。」

MariusStanciuによるClassyWiggleJQueryプラグインを確認してください。

于 2013-03-19T14:04:30.830 に答える
2

jQueryRumbleなどのプラグインを使用できます：http： //jackrugile.com/jrumble/

を使用して独自のを作成できますanimate。例として（divを振る方法を示すため）：

<div id="div">
</div>

<input type="button" id="buzz" />

$("#buzz").click(function() {
   $("#div").animate({
    left: "20px",
   }, 50);

   $("#div").animate({
    left: "-20px",
   }, 50);

   $("#div").animate({
    left: "20px",
   },50);
});

http://jsfiddle.net/VRzc9/1/

于 2013-03-19T14:24:07.930 に答える
2 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
$('#shakediv').effect('shake');

シェイク効果はjqueryuiに組み込まれており、インポートして使用します

于 2016-04-11T01:11:51.083 に答える
0

以下の例に従ってください

<div class="buzz">
    <!-- Your Div Content Here -->
</div>


<script>

$(docuement).ready(function(){
   buzzMe();
   //or
   buzzMeFor(0)
})
function buzzMe()
{
   $('buzz').css('margin-left','-2');
   delay(500);
   $('buzz').css('margin-left','2');
   delay(500);
   buzzMe()
}

//Or use this function for Specific times
//Call & Pass Arguments 0
function buzzMeFor(count)
{
  count++;
  $('buzz').css('margin-left','-2');
  delay(500);
  $('buzz').css('margin-left','2');
  delay(500);
  if(count!=20)    
    buzzMe(count)    
}
</script>
于 2013-03-19T14:05:29.290 に答える
0

jQueryのanimate関数のみを使用して、次のトリックを実行します。

function recursiveShake(jQelement, pixel, counter) {
  if (counter > 0) {
    jQelement.animate({
      'margin-left': '+='.concat(pixel, 'px')}, 
      30, 
      recursiveShake(jQelement, -pixel, counter - 1)
    );
  }
}
// (counter must be even to avoid any shift)

于 2018-10-03T10:22:28.680 に答える