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 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 […]
pausePlay

From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.

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

Tagged with:

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

http://tympanus.net/codrops/author/cody/

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 3

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

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