Pause and Play Effect with jQuery

Here’s an effect based on the one used in fml to stop and pause an event. The idea is that when we click on the play/pause button or press the […]

Here’s an effect based on the one used in fml to stop and pause an event. The idea is that when we click on the play/pause button or press the space button, an image (play or pause) appears and fades out. This effect is done using jQuery, which we use to animate the image enlarging and fading out.

The images used for this effect:

play pause

The CSS:

.player img{
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}

The HTML:

<a id="playbutton">Pause / Play</a>
<div id="player">
    <img id="play" src="images/play.png" width="100" height="100" style="display:none;"/>
    <img id="pause" src="images/pause.png" width="100" height="100" style="display:none;"/>
</div>

The jQuery:

$(function() {
$(document).keypress(function(e){
if ((e.which && e.which == 32) || (e.keyCode && e.keyCode == 32)) {
togglePlay();
return false;
} else {
return true;
}
});
$('#playbutton').click(function(){
togglePlay();
return false;
});

function togglePlay(){
var $elem = $('#player').children(':first');
$elem.stop()
.show()
.animate({'marginTop':'-175px','marginLeft':'-175px','width':'350px','height':'350px','opacity':'0'},function(){
$(this).css({'width':'100px','height':'100px','margin-left':'-50px','margin-top':'-50px','opacity':'1','display':'none'});
});
$elem.parent().append($elem);
}
});

Tiny break: Want to get website inspiration? Check out our Webzibition and see whats trending.

cody

Cody loves jQuery - he puts the magic into every web application. He is crazy about Curry dishes.

Browse amazing websites

💎✨ Discover fresh gems in our handpicked exhibition of standout websites that caught our eye.

Feedback 3

Comments are closed.
  1. Pingback: uberVU - social comments

  2. Pingback: Pause and Play Effect with jQuery | ajaxdump