Use CSS transitions

This commit is contained in:
Kload 2013-09-25 03:07:06 +02:00
parent 2b6daca854
commit 65b0654f6c
2 changed files with 7 additions and 6 deletions

View file

@ -38,7 +38,7 @@ body h5 {
float:left; float:left;
height: 100%; height: 100%;
max-width: 750px; max-width: 750px;
width: 49%; width: 50%;
height: 100%; height: 100%;
padding: 5px; padding: 5px;
} }

View file

@ -96,7 +96,7 @@ app = Sammy('#main', function (sam) {
}); });
} }
blockSize = $('#slider').innerWidth(); blockSize = $('#slider').innerWidth()-20;
if (store.get('slide') == 'back') { if (store.get('slide') == 'back') {
if ($('#slideBack').is(':visible')) $('#slideBack').hide(); if ($('#slideBack').is(':visible')) $('#slideBack').hide();
@ -111,7 +111,7 @@ app = Sammy('#main', function (sam) {
$('#slider-container').removeClass('move').css('margin-left', '0px'); $('#slider-container').removeClass('move').css('margin-left', '0px');
$('#slideBack').show().html($('#main').html()); $('#slideBack').show().html($('#main').html());
leSwap(); leSwap();
$('#slider-container').addClass('move').css('margin-left', '-'+ blockSize +'px'); $('#slider-container').addClass('move').css('margin-left', '-'+ ($('#slider').innerWidth()-10) +'px');
store.clear('slide'); store.clear('slide');
} else { } else {
@ -335,9 +335,10 @@ app = Sammy('#main', function (sam) {
*/ */
$(document).ready(function () { $(document).ready(function () {
app.run('#/'); app.run('#/');
$('#slider-container').width(2*$('#slider').innerWidth() +'px'); $('.block').width($('#slider').innerWidth()-20);
$('#slider-container').width(3*$('#slider').innerWidth() +'px');
$(window).resize(function() { $(window).resize(function() {
$('#slideBack').css('margin-left', '-'+ $('#slider').innerWidth() +'px'); $('.block').width($('#slider').innerWidth()-20);
$('#slider-container').width(2*$('#slider').innerWidth() +'px'); $('#slider-container').width(3*$('#slider').innerWidth() +'px');
}); });
}); });