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: Design every part of your website with the Divi Theme Builder.

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.

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