I made animation on click, and it looks fine on PC. The problem is that animation on Android and iOS is sharp and looks ragged. I searched for solution for a long time, but still haven't find any solution.
This is my JS, you can view all the code on this jsfiddle.
$('.project-image').on('click', function() {
var $this = $(this);
var img = $(this).attr('id');
var minusLeft = $(this)[0].offsetLeft - 8;
var minusTop = $(this)[0].offsetTop - 80;
$('.show-description').fadeOut(600, function () {
$('.hide-description').fadeIn(600);
});
$('.flex-container img').not('#' + img).animate({
opacity: 0,
}, 200, "linear", function() {
$this.css({
top:'-'+minusTop+'px',
left:'-'+minusLeft+'px'
})
setTimeout(function() {
$('.flex-container img').not('#'+img).hide();
$this.css("position", 'static');
$('.flex-container').css('flex-flow', 'column wrap');
$('.'+img+'-text-block').show();
$('.'+img+'-text-block').animate({
opacity:1
}, 100)
}, 600)
});
})
$('.hide-description').on('click', function() {
$('.hide-description').fadeOut("slow", function () {
$('.show-description').fadeIn(1000);
});
$('[class*="-text-block"]').hide()
$('.flex-container').css('flex-flow', 'row wrap')
$('.flex-container img').css({
position: 'relative',
top:0,
left:0
})
$('[class*="-text-block"]').css('opacity', '0');
$('.flex-container img').animate({
opacity: 1,
}, 400)
$('.flex-container img').show()
})
Related
I have created a few animations and each of them should be a separate slide on the main site slider.
Thats why, I've got from my boss an object structure (code below) and he said I should use it to those animations.
var RDAnimation = function(o){
var f = $.extend({
start: function() {
return true;
},
pause: function() {
return true;
},
reset: function() {
return true;
},
stop: function() {
if (this.pause()) {
return this.reset();
}
},
vars: {}
},o);
this.start = f.start;
this.pause = f.pause;
this.reset = f.reset;
this.stop = f.stop;
this.vars=f.vars;
};
But because I don't have a much of experience with working on objects, I just paste all of the animating function into 'start', just to see what will happen (code below).
var anim3=new RDAnimation({
start: function() {
var $this = this;
function bars() {
var barHeight = 0;
$('.chart-bar').each(function () {
barHeight = Math.floor(Math.random() * 100);
$(this).delay(1000).animate({
'height': barHeight + '%',
'min-height': '20px'},
700, function(){
bars();
});
});
}
var count = 0;
function badgeClone() {
var badge1 = $('.badge');
var badge2 = $('.badge').clone();
var badgeWidth = badge1.width();
var badgeHeight = badge1.height();
//badge1.text(count);
badge1.after(badge2);
badge2.css({
'line-height': '180px',
'text-align': 'center',
'font-size': '70px',
'font-weight': 'bold',
'color': '#fff',
'opacity':'0'
});
badge2.animate({
'width': badgeWidth * 2 + 'px',
'height': badgeHeight *2 + 'px',
'line-height': '360px',
'font-size': '140px',
'top': '-150px',
'right': '-100px'
},
100, "linear", function() {
if(count >= 9) {
count = 1
} else {
count++
}
badge2.text(count);
badge2.delay(300).animate({
'width': badgeWidth + 'px',
'height': badgeHeight + 'px',
'line-height': '180px',
'font-size': '70px',
'top': '-60px',
'right': '-40px',
'opacity': '1'},
100, "linear", function(){
badge1.fadeOut(600, function(){
$(this).remove();
});
});
});
}
bars();
var chartbars = $('.chart-bar');
$(chartbars).each(function(i) {
chartbar = chartbars[i];
var leftPos = i * 24 + 4;
$(chartbar).css({'left': leftPos + 'px'});
});
// ppl animations
var height = $('.person').height();
$('.person').css({'top': -height + 'px'});
var female = function(){
$('.female').fadeIn(300).animate({'top': '0px'}, 2500, function(){
male();
badgeClone();
$(this).delay(1000).fadeOut(500, function() {
$(this).css({'top': -height + 'px'});
});
});
};
var male = function(){
$('.male').fadeIn(300).animate({'top': '0px'},2500,function(){
badgeClone();
female();
$(this).delay(1000).fadeOut(500, function() {
$(this).css({'top': -height + 'px'});
});
});
};
male();
},
pause: function() {
var $this = this;
$('.chart-bar').stop();
},
reset: function() {
var $this = this;
$this.count = 0;
},
vars: {
}
});
And it's working! Animation will start when I run anim3.start. But now.. How can I stop it? Because I have to stop it when user chose another animated slide, and start it from beginning when user again chose this slide.
I've wrote a simple code, just for test.. But it doesnt work.
In code above I've wrote $('.chart-bar').stop(); in pause, to check if this will stop at least one chart-bar animation but it doesnt.
In reset I've wrote $this.count = 0; to reset number on the .badge element - but it doesnt work as well..
Obviously, to run those lines of code I've put a simple code on the bottom of script (code below).
$('#slider-2, #slider-3').hide();
$('.tour-slider').on('click', 'li a', function(e){
e.preventDefault();
$(this).closest('.slider').hide();
var sliderHref = $(this).attr('href');
$(sliderHref).fadeIn();
if(sliderHref == '#slider-1'){
anim1.start();
anim3.pause();
}else if(sliderHref == '#slider-2'){
anim2.start();
anim3.pause();
}else if(sliderHref == '#slider-3'){
anim3.reset();
anim3.start();
anim3.pause();
}
});
As you can see, I even run a anim3.pause(); at once, after I start it - just to check, if it will stop immediately - but even one chart-bar didn't stop..
So now, can somebody tell my please, how can I stop (and reset) these animated elements? I just need to get one working example and rest I can do by my own.
I will be grateful for any help
Cheers!
Ok, I found a solution.
1st of I modify a bars() function (add if statement)
function bars() {
var barHeight = 0;
var loop = true;
$('.chart-bar').each(function () {
barHeight = Math.floor(Math.random() * 100);
$(this).delay(1000).animate({
'height': barHeight + '%',
'min-height': '20px'},
700, function(){
if (loop) {
bars();
}
});
});
}
And then all I need was those two line of code added into my pause method:
pause: function() {
var $this = this;
$('#animation-3').find('*').stop(true, false);
$this.loop = false;
}
Thanks everyone for your time :)
I would like to replicate the same functionality as at ign.com, where the indicator bar fills up over time. I got it working but I got some sync issues after a while. So i'm open to suggestions to do it from scratch (I'm beginner with all this animation stuff).
This is the code.
function GoProgressBar() {
var $lineStatus = $('.featured-articles-line-status');
$lineStatus.css('width', '0px');
$lineStatus.animate({ width: '694px' }, 12000, 'linear', GoProgressBar);
};
function GoOverlay(width, isLast, currentWidth) {
var $overlayLine = $('.status-overlay');
if (isLast) {
$overlayLine.css('width', '0px');
return;
}
if (currentWidth) {
$overlayLine.css('width', currentWidth);
$overlayLine.animate({ width: width }, 700);
} else {
$overlayLine.css('width', '0px');
$overlayLine.animate({ width: width }, 700);
}
};
function ShowNextElement() {
var $elements = $('.element'),
$overlayLine = $('.status-overlay'),
$liElements = $('#elements li'),
width;
if (currentElement === elements[elements.length - 1]) {
currentWidth = $overlayLine.width() + 'px',
width = currentWidth + $($liElements[(elements.length - 1)]).outerWidth() + 'px';
GoOverlay(width, true, currentWidth);
currentElement = elements[0];
$elements.hide();
$(currentElement).fadeIn(1000);
return;
}
i = elements.indexOf(currentElement) + 1;
var currentTab = $liElements[(i - 1)],
currentWidth = $overlayLine.width();
if (currentWidth) {
width = currentWidth + $(currentTab).outerWidth() + 'px';
GoOverlay(width, false, currentWidth);
} else {
width = $(currentTab).outerWidth() + 'px';
GoOverlay(width, false, false);
}
currentElement = elements[i];
$elements.hide();
$(currentElement).fadeIn(1000);
}
Thanks!
http://jqueryui.com/progressbar/
You could try this..
There are more features in addition to this,check it out.
Might come useful :)
There are a wealth of ways in which you could do this.
You should have some kind of controller to manage the show and hide.
var Application = {
show : function() {
jQuery('.application-overlay').stop().animate({ top: 40 }, 500);
jQuery('.cf-ribbon').stop().animate({height: 1000},500);
},
hide : function() {
jQuery('.application-overlay').stop().animate({ top: -1200 }, 500);
jQuery('.cf-ribbon').stop().animate({height: 200},500);
}
};
Then you have your triggers : Application.show();
jQuery(document).ready(function() {
jQuery('.cf-speakers .span2 a').hover(function() {
jQuery('span',this).stop().animate({ opacity: 1.0 },100);
}, function() {
jQuery('span',this).stop().animate({ opacity: 0.0 },100);
});;
jQuery('.apply-now').click(function(e) {
Application.show();
e.stopPropagation();
e.preventDefault();
});
jQuery('body').click(function(e) {
var application = jQuery('.application-overlay');
if( application.has(e.target).length === 0)
Application.hide();
});
jQuery('.gallery a').click(function(e) {
var src = jQuery(this).attr('href');
jQuery('.main-container img').hide().attr('src', src).fadeIn('fast');
jQuery('.gallery a').each(function() {
jQuery(this).removeClass('active');
});
jQuery(this).addClass('active');
e.stopPropagation();
e.preventDefault();
});
});
Your css would of course come into play also but that can be left to you!
This should give you an example of what you need .. But you're already on the right track, sometimes there is merit in reusing other people code too you know! :)
I'm playing around with jQuery animations and timers in Javascript, and I would like to achieve having a small sentence on my page pulsate (i.e. change opacity from 1->0.2, 0.2->1) a few seconds after the page loads, pulsate for a few seconds, stop pulsating and change color from black to red.
<div class="pulsate">Test</div>
<script>
$(function() {
var p = $(".pulsate");
for(var i=0; i<3; i++) {
p.animate({opacity: 0.2}, 1000, 'linear')
.animate({opacity: 1}, 1000, 'linear');
}
});
</script>
I have my current work in the following JSFiddle (http://jsfiddle.net/nLqmz/). Anyone have any thoughts about how I could approach this problem?
Here is a solution that works but there probably is a nicer way to do it:
$(function() {
var p = $(".pulsate"),
faded = false,
stopFading = false;
setTimeout(function(){
toggleFade();
setTimeout(function(){
stopFading = true;
p.animate({'color': 'red', 'opacity' : 1},{'duration' : 'fast'});
}, 3000);
}, 3000);
function toggleFade() {
if (!stopFading) {
p.animate({
'opacity': faded ? 0.2 : 1
},{
'duration' : 500,
'complete' : function(){
faded = faded ? false : true;
toggleFade();
}
});
}
}
});
http://jsfiddle.net/nLqmz/2/
$(function () {
var p = $(".pulsate");
var pulse = setTimeout(function () {
pulsate();
}, 3000);
var = pulsate_repeat ;
var pulsate = function() {
p.animate({
'color': 'red',
'opacity': 1
}, function () {
p.animate({
'color': 'black',
'opacity': 0.2});
});
//pulsate();
pulsate_repeat = setTimeout(function () {
pulsate();
}, 500);
};
//after 30 secs stop repeating
setTimeout(function () {
clearTimeout(pulsate_repeat);
}, 30000);
});
This should work, just customize the pulsate class in CSS the way you want:
function pulsateElement(element){
element.removeClass('pulsate');
setTimeout(function(){
element.addClass('pulsate');
setTimeout(function(){
pulsateElement(element);
},500);
},700);
}
I have found this nice js slider that works by clicking on radio buttons, selecting the slides to view.
I'd like it to autoplay the slides, and give it a time for slides and transitions, but I'm honestly unsure where to put those values.
I've seen the other questions about similar problems, but couldn't find a proper answer to my problem. Help, please?
<script type="text/javascript">
$(document).ready(function () {
var showCaseItems = $('.show-case-item').hide();
var splashes = $('.splash').hide();
//get each image for each slide and set it as a background of the slide
// splashes.each(function () {
// var img = $(this).find('img');
// var imgSrc = img.attr('src');
// img.css('visibility', 'hidden');
// $(this).css({ 'background-image': 'url(' + imgSrc + ')', 'background-repeat': 'no-repeat' });
// });
splashes.eq(0).show();
showCaseItems.eq(0).show();
var prevIndex = -1;
var nextIndex = 0;
var currentIndex = 0;
$('#banner-pagination li a').click(function () {
nextIndex = parseInt($(this).attr('rel'));
if (nextIndex != currentIndex) {
$('#banner-pagination li a').html('<img src="assets/img/slidedot.png" alt="slide"/>');
$(this).html('<img src="assets/img/slidedot-active.png" alt="slide"/>');
currentIndex = nextIndex;
if (prevIndex < 0) prevIndex = 0;
splashes.eq(prevIndex).css({ opacity: 1 }).animate({ opacity: 0 }, 500, function () {
$(this).hide();
});
splashes.eq(nextIndex).show().css({ opacity: 0 }).animate({ opacity: 1 }, 500, function () { });
showCaseItems.eq(prevIndex).css({ opacity: 1 }).animate({ opacity: 0 }, 500, function () {
$(this).hide();
showCaseItems.eq(nextIndex).show().css({ opacity: 0 }).animate({ opacity: 1 }, 200, function () { });
});
prevIndex = nextIndex;
}
return false;
});
});
</script>
You can use jquery and setTimeout
setTimeout(function() {$('#banner-pagination li a').trigger('click');}, 1500);
this code will loop every 1.5 seconds and trigger a click on #banner-pagination li a
you can use the jquery trigger event and hit the radio button click event forcefully
$('#foo').trigger('click');
http://api.jquery.com/trigger/
setInterval(function()
{$('#banner-pagination li a[rel='+((currentIndex+1)%3)+']').trigger('click');},5000);
Thanks
I have made a spelling game for primary school children. I want to make the click events in my game touch events so it can be compatible on tablets. Is there a way I can put them alongside my click events so that one program is compatible to both, or will I have to make a tablet version?
Here I have the code for one of my click events as an example
$('.drag').on('click', function(e) {
e.preventDefault();
if (animation) return;
animation = true;
setTimeout(function() {
animation = false;
}, 700);
$(".minibutton").css('visibility', 'hidden');
$('.next').css('visibility', 'hidden');
var target = $('.drop-box.spellword:not(.occupied):first');
var targetPos = target.position();
var currentPos = $(this).offset();
var b = $(this);
if (target.length) {
target.addClass("occupied");
b.clone().addClass(
b.data("letter") == target.data("letter") ? "wordglow3" : "wordglow").appendTo("table").css({
background: "transparent",
position: "absolute",
top: currentPos.top,
left: currentPos.left
}).animate({
top: targetPos.top,
left: targetPos.left
}, "slow", function() {
$(this).css({
top: 0,
left: 0
}).appendTo(target);
var spellWord = $('.drop-box.spellword');
if (!spellWord.filter(':not(.occupied)').length) {
var wordIsCorrect = 0;
spellWord.each(function() {
if ($(this).data("letter") == $(this).find("div").data("letter")) {
wordIsCorrect++;
}
});
if (spellWord.length == wordIsCorrect) {
spellWord.addClass('wordglow2');
$(right).val('Right!');
$(right).show();
success.play();
$(wrong).hide();
score.right++;
score.attempts++;
if (score.right == 3) {
$('.answers').css('visibility', 'visible');
$('.answers').html("Well done! </br> You correctly spelt " + score.right + ". </br> Keep it up.").show();
$('table').fadeOut(3000);
$('.right').hide();
$('.box-style2').hide();
$('.box-style').hide();
$('.picstyle').hide();
$('.play').hide();
$('.minibutton2').hide();
$("#mysoundclip").attr('src', listOfWords[rndWord].audio);
audio.stop();
$("#mypic").attr('src', listOfWords[rndWord].pic);
pic.hide();
}
setTimeout(function() {
jQuery('.minibutton').trigger('click');
}, 1500);
setTimeout(function() {
jQuery(right).hide();
}, 1500);
} else {
//spellWord.addClass("wordglow4").css('color', 'transparent');
$(wrong).val('Wrong!');
$(wrong).show();
failure.play();
$(right).hide();
score.wrong++;
score.attempts++;
if (score.wrong == 3) {
$(".minibutton").css('visibility', 'visible');
$('.next').css('visibility', 'visible');
}
$('.drop-box.spellword').animate({
'opacity': 1
}, 1500, function() {
$(this).removeClass('wordglow4').removeClass('occupied').html('')
});
setTimeout(function() {
jQuery(wrong).hide();
}, 1500);
}
}
});
}
});
Can someone point me in the right direction as I have never done this before.
Here is a fiddle to help (Sound warning!!) http://jsfiddle.net/smilburn/7Y7A5/8/
You could add the tap event and include jQuery Mobile in your mobile version.
$('.drag').on('click tap', function(e) {...}