Jak zrobić wibracje DIV lub buzz? (podobnie jak w przypadku funkcji iOS move/delete app)

Question

Pracuję nad stroną internetową, którą użytkownik może dostosować i chciałbym, aby element "wibracja/buzz" był elementem DOM (w moim konkretnym przypadku jest to DIV). Chciałbym uzyskać efekt podobny do tego, który dzieje się na iOS po długim naciśnięciu dowolnej ikony aplikacji (wszystkie ikony stają się niepewne).

wyszukiwania w internecie Właśnie znalazłem tę bibliotekę jQuery: http://www.dev4web.eu/projects/jquery.vibrate/

Ale nie jestem pewien, że będę w stanie uzyskać ładny efekt, używając go.

Jakieś pomysły dotyczące wdrożenia?

Dzięki!

Answer 1

„jQuery ClassyWiggle pozwala emulować ikony efekt Wiggle na iPhone mają po naciśnięciu i przytrzymaniu na nich.”

Sprawdź jQuery plugin Classy Wiggle przez Marius Stanciu.

Answer 2

śledzić poniższym przykładzie

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

Answer 3

Można użyć wtyczki takie jak jQuery Rumble: http://jackrugile.com/jrumble/

Mogłeś tworzyć własne przy użyciu animate. Jako przykład (Aby pokazać, jak wstrząsnąć 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/

Answer 4

Można także zaimplementować własną animację takiego:

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

Answer 5

I zbudował coś, co miało na celu naśladować efekt przesuwania na iOS może być ostatnio użyty do sortowania jQuery. Możesz go zobaczyć na żywo na stronie tastemakerx.com, gdzie użyłem go, by ulepszyć funkcję sortowania kolekcji.

Oto skrzypce Zacząłem: http://jsfiddle.net/jozecuervo/fv8vR/

i tu jest 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;  
} 

Answer 6

użyć jQuery w plugin:

$('#loginL').effect('shake'); 

Answer 7

Oto Javascript, że zrobi to, czego” szukam ponownie.

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

Podobnie jak wiele innych rozwiązań, wymaga biblioteki jQuery. Jednak nie wymaga żadnych innych wtyczek.

Answer 8

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
$('#shakediv').effect('shake'); 

efekt Shake jest zbudowany w jQuery UI, importu i używania