Runde Schaltfläche CSS Laden Animation

Question

Ich versuche, eine Website zu erstellen, um meine Kinect zu verwenden. Meine Hand ist die Maus, also habe ich einen Indikator erstellt, wenn eine Schaltfläche aktiviert ist.

Das erste, worüber ich nachdachte, war ein runder Knopf mit einem 2px weißen Rand, der einen Hover-Effekt verwendete. Wenn Sie den Mauszeiger 2 Sekunden lang über die Schaltfläche bewegen, sollte der Rahmen oder eine Linie innerhalb des Rahmens in eine andere Farbe (z. B. blau) geändert werden, um den Fortschritt/die Zeitüberschreitung anzuzeigen.

Nach den zwei Sekunden, in denen der Mauszeiger über die Schaltfläche bewegt wurde, sollte ein Klickereignis ausgelöst werden, um beispielsweise zu einer anderen Seite zu navigieren.

Wenn ich den Knopf loslasse, sollte der Ladevorgang langsam rückwärts gehen.

Mein Code: http://jsfiddle.net/nick_craver/9pzVQ/1/

<a href="#" class="menu-arrow" onclick="showMenu('mnu_searches', event, 0, this)">Hover me!</a> 

<script> 
    $(function() { 
     $("a.menu-arrow").hover(function() { 
     $.data(this, "timer", setTimeout($.proxy(function() { 
      $(this).click(); 
     }, this), 2000)); 
     }, function() { 
     clearTimeout($.data(this, "timer")); 
     }); 
    }); 

    function showMenu() { 
     alert("showMenu function fired"); 
    } 
</script> 

Ein Diagramm: http://imgur.com/RdYotvd

Answer 1

Ich hoffe, dass ich Sie richtig verstanden. Ich benutzte reines Javascript und ein wenig CSS für Hoovering Button-Effekte.

var button = document.getElementById('button'); 
 
var timer; 
 

 
button.addEventListener('mouseover',function(){ 
 
\t timer = setTimeout(function(){ 
 
    \t alert('load new website now!'); 
 
    },2000); 
 
}); 
 

 
button.addEventListener('mouseout',function(){ 
 
\t clearTimeout(timer); 
 
    //location.replace("http://imgur.com/RdYotvd"); 
 
})

.menu-arrow{ 
 
    display:inline-block; 
 
    margin:10px; 
 
    border: solid 4px white; 
 
    border-radius:5px; 
 
    background-color:white; 
 
    padding:5px; 
 
    transition: border-color 2s ease-in-out; 
 
} 
 

 
.menu-arrow:hover{ 
 
    border-color:#33aaff; 
 
}

<a href="#" id="button" class="menu-arrow" onclick="showMenu('mnu_searches', event, 0, this)">Hover me!</a>