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 sponsor: Ship fast and never break a thing with Shortcut (formerly Clubhouse.io).

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

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

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

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 3

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

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