JavaScript animierter Button für jQuery
animierter Button mit jQuery
ist eine Alternative zu normalen Button. Der Mauszeiger auf dem Button lässt den kleinen Kreis hüpfen. Zur Demo bitte mit der Maus auf den Butten gehen.
animierter Button
JavaScript -animierter Button für jQuery
in <head> einfügen
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".button").hover(function(){
$(".button img")
.animate({top:"-10px"}, 200).animate({top:"-4px"}, 200) // first jump
.animate({top:"-7px"}, 100).animate({top:"-4px"}, 100) // second jump
.animate({top:"-6px"}, 100).animate({top:"-4px"}, 100); // the last jump
});
});
</script>
<style type="text/css">
.button {
padding: 4px 10px 3px 25px;
border: solid 1px #8AB134;
position: relative;
cursor: pointer;
display: inline-block;
background-image: url( 'bkg.png' );
background-repeat: repeat-x;
font-size: 11px;
height: 16px;
text-decoration: none;
color: #40740D;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
}
.button img {
position: absolute;
top: -4px;
left: -12px;
border: none;
}
.button:hover {
color: #8AB134;
}
input, textarea {
display: block;
margin-bottom: 10px;
width: 300px;
}
</style>
jquery-1.2.6.min.js
animierter Button für jQuery Seite
