Comment puis-je faire un DIV vibreur ou buzz? (similaire à iOS déplacer/supprimer app)

Je travaille sur un site web que l'utilisateur peut personnaliser et je voudrais faire "vibrer/buzz", un élément du DOM (dans mon cas précis c'est un DIV).
J'aimerais obtenir un effet similaire à celui qui arrive sur iOS lorsque vous appuyez sur n'importe quelle icône de l'application (toutes les icônes d'obtenir fragile).

La recherche sur le web je viens de trouver cette bibliothèque jQuery:
http://www.dev4web.eu/projects/jquery.vibrate/

Mais je ne suis pas sûr que je vais être en mesure d'obtenir un effet agréable de l'utiliser.

Des idées sur la façon de mettre en œuvre cette?

Merci!

OriginalL'auteur Marco Matarazzi | 2013-03-19

2

"jQuery ClassyWiggle vous permet d'émuler le remuer les icônes d'effet sur un iPhone lorsque vous appuyez et maintenez sur eux. "

Vérifier la Chic Wiggle plugin JQuery par Marius Stanciu.

Vraiment bon plugin. Personne ne sait si M. Stanciu participe DONC?
il peut également être fait avec un code personnalisé alors pourquoi plugin
Oui, les animations CSS sont beaucoup plus accessibles aujourd'hui, 3 ans plus tard. 🙂

OriginalL'auteur isherwood

Vous pourriez également mettre en place votre propre animation comme ceci:

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...
        });
    });
}

OriginalL'auteur Ilyssis

J'ai construit quelque chose qui était destiné à imiter l'iOS wiggle effet récemment pour être utilisé sur le dessus de jQuery sortable. Vous pouvez voir en direct sur tastemakerx.com où je l'ai utilisé pour améliorer la collecte de fonctionnalité de tri.

Voici le violon, j'ai commencé avec:
http://jsfiddle.net/jozecuervo/fv8vR/

Et voici le 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;    
}

Le lien semble incorrect et n'est pas un numéro de version, et je vois que votre JSFiddle code a changé au fil du temps.
Correct, le violon changé parce que j'ai continué à travailler sur la fonctionnalité dont j'avais besoin. Ce site a vendu et le CA est maintenant en baisse. Le css animation avec des images clés ci-dessus fonctionne toujours très bien. N'hésitez pas à faire un nouveau violon.

OriginalL'auteur jozecuervo

3

Voici un peu de Javascript que vous ferez ce que vous cherchez.
```
var times = 10;
var duration = 200;
for (var i = 0; i < times; i++)
$('div#shake-it').animate({
left: (i % 2 === 0 ? "-" : "+") + "=50"
}, duration);
```
Comme beaucoup d'autres solutions, il exige de la bibliothèque jQuery. Cependant il n'a pas besoin d'autres plugins.

c'est de loin la meilleure solution sans dépendances

OriginalL'auteur Scaramouche
2

Utilisation de jquery plugin:
```
$('#loginL').effect('shake');
```
OriginalL'auteur Gurkha
1

Vous pouvez utiliser un plugin comme jQuery Rumble: http://jackrugile.com/jrumble/

Vous pouvez créer votre propre en utilisant animate. À titre d'exemple (Pour montrer comment secouer le 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/

OriginalL'auteur Darren
1
```
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
$('#shakediv').effect('shake');
```
l'effet de tremblement est construit en jquery ui , l'importation et l'utilisation

OriginalL'auteur chings228

suivez l'exemple ci-dessous

<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>

Ce ne sera pas à la div "buzz"....
C'est hilarant, merci! lol
Par les Erreurs que j'ai appuyé sur la touche entrée deux fois ainsi publié avant que j'ai terminé. Veuillez marquer +1 au lieu de moins.

OriginalL'auteur Manoj Pilania

Vous devez vous connecter pour publier un commentaire.