I have 6 divs that I want to activate a heartbeat CSS animation, however, I would like to do that by a sequence.
For example, I have an array:
self.generatedSequence = [0,3,5,3];
Each item in the array means the position of the div that will receive the heartbeat function.
Each dive is a UI component from AngularJs:
<div class="grid-cell"
ng-class="{'heartbeat': $ctrl.isActive
}"
></div>
I'm trying to use the controller to activate the HeartBeat animation in every position by a sequence.
So in that example will be like
The position 0 will takes 1s
The position 3 will takes 1s after the position 0
The position 5 will takes 1s after the position 3
The position 3 will takes 1s after the position 5
So all the animation will take 4s.
I tried to do that with $timeout, but it does the both at the same time.
https://codepen.io/guifeliper/pen/pwdKKj
You want to use $interval, not $timeout since $timeout only runs once.
$ctrl.stopInterval = $interval(function () {
$ctrl.heartbeatId = $ctrl.generatedSequence.shift();
// be sure to clean up afterwards
if($ctrl.generatedSequence.length == 0) {
$interval.cancel($ctrl.stopInterval);
}
}, 1000);
And change your grid cells ng-class directives like this:
<div class="grid-cell" ng-repeat="grid in $ctrl.gridBox"
ng-class="{'heartbeat': $ctrl.heartbeatId == grid }"></div>
https://codepen.io/jdoyle/pen/xrPJwW
Related
I have a scroller that animates scrolling using prev/next buttons. The duration of the animation is calculated based on the distance moved, so the duration is variable.
$c.animate({ scrollLeft: scrollLeft },
duration, 'easeInOutExpo', function () {
if (showPrev === 0) $s.attr("data-prev", showPrev);
if (showNext === 0) $s.attr("data-next", showNext);
});
After the animation is done, I want to refresh the user interface (the buttons), which you can see is done by updating two data attributes.
To date, I've tried two different options:
1. Update the data attributes before the animation
I use a CSS transition delay to make updates happen later but cannot fully co-ordinate it with the variable duration of the animation - sometimes it can be way out.
2. Update the data attributes after the animation
I attach the update function directly after the animation, which works, but there is an obvious delay after the animation is finished before the updates kick in.
Neither is perfect.
Ideally what I would like to do is kick off the function just before the scroll animation is finished - so if the scroll duration is 1s I would like to update the attributes at duration - 0.2s (0.8s).
This seems entirely possible given that I have full control of the duration.
What I don't know is how to implement this using jQuery - possibly kick off two tasks in parallel?
I'm not a jQuery expert by any stretch of the imagination so any help would be appreciated.
Please try with this code
$c.animate({ scrollLeft: scrollLeft },
duration, 'easeInOutExpo', function () {
if (showPrev === 0) $s.attr("data-prev", showPrev);
if (showNext === 0) $s.attr("data-next", showNext);
time = setTimeout(function () {
//keep your code here
}, duration-0.2s);
});
duration-0.2s => make it correct, i just mentioned it as an example.
I cant seem to get this slide show to work with javascript. the image fades in and out correctly on the first image but when transitioning for the second image it seems to immediately skip to the image instead of transition like the previous.
<script type="text/javascript">
var images = ["image1.png", "image2.png", "image3.jpg"];
var imagecount = 0;
window.setInterval(setImage,5000);
function setImage(){
$('.bgimage').fadeIn(5000);
$('.bgimage').css('background-image','url('+images[imagecount]+')');
$('.bgimage').fadeOut(5000);
imagecount++;
if(imagecount > 2){
imagecount=0;
}
}
</script>
Without seeing the html structure or a fiddle, it's hard to trouble-shoot with any accuracy. I'm guessing the issue is probably with your fadeIn and fadeOut calls, as they are currently set to animate for a full 5 seconds each, and animating at the same time as one another (They are called asynchronously). Instead, you should adjust the fadeIn method to execute after the fadeOut finishes using the built-in jQuery callback. Like so:
$('.bgimage').fadeOut(500, function() {
$('.bgimage').css('background-image','url('+images[imagecount]+')');
$('.bgimage').fadeIn(500);
});
I've also switched the order of your fade calls, as you should fade out the image, then update it (while it's not visible), then fade it back in. Your interval should still work the way you want, running every 5 seconds. Now the transitions won't take a full 5 seconds to animate.
Recently, I found an SVG with an animated cursor element (like the kind of cursor you see when you're typing text on a screen, like I am now). The JavaScript behind this basically switches the visibility of the target element between on and off. The "cursor" element was the only part of the SVG file that the JavaScript affected. I've found that it can target HTML document objects, too.
Here's the original JavaScript, with id="cursor" (#cursor) marking the target element:
var visible = true;
setInterval(function () {
document.querySelector('#cursor').style.opacity = visible ? 0 : 1;
visible = !visible;
}, 550);
What I want to do is alter this code to make it fade in and out. The resulting effect would be like this:
Fade in quickly (250 ms)
Stay visible for less than half a second (500 ms)
Fade out (250 ms)
Repeat 1.~3.
In other words, steps 1 through 3 would all take place in one second, every second.
The question I have about this is: how do I do this in either JavaScript or jQuery?
(P.S.: is there a jQuery equivalent to the above code?)
Using jQuery, you could do the following
setInterval(function () {
$("#cursor").fadeIn(500, function(){
$(this).fadeOut(500);
});
}, 1000);
Using an interval like you mentioned to start the fade in (utilizing jQuery functions). Passing a callback to fade back out. You can mess with the timing to fit your feel
I would like to change an image in my site with fading effect. The thing is that I am using two different classes for the same div, so actually I want to fade out one class and in the meanwhile start fading in the second class, before the first one has been completely removed.
HTML:
<div id="background_image" class="day"></div>
CSS:
.day{
background: url(day.png);
}
.night {
background: url(night.png);
}
JQuery:
setTimeout(function(){
if($("#background_image").hasClass("day")){
$("#background_image").fadeOut(function() {
$(this).removeClass("day");
});
$("#Landscape").fadeIn(function() {
$(this).addClass("night");
});
}else{
$("#background_image").fadeOut(function() {
$(this).removeClass("night");
});
$("#Landscape").fadeIn(function() {
$(this).addClass("day");
});
}
}, 5000);
But this code makes the image "day.png" first to disappear completely and then the "night.png" comes which is not what I want.
Is there a way to fade out the class "day" and start fade it "night" without having a blank space between the fading? Thanks in advance
It seems that what you're trying to do is cross-fading. This is normally done using 2 divs. If this is for the entire background, then I suggest http://srobbin.com/jquery-plugins/backstretch/. You can take a look at their implementation to narrow it down to just a div if you don't need it to cover the entire background.
This is how I solved it for a similar case.
var images = [
"/content/images/crane1.jpg",
"/content/images/crane2.jpg",
"/content/images/crane-interior.jpg"
];
// The index variable will keep track of which image is currently showing
var index = 0;
// Call backstretch for the first time,
// In this case, I'm settings speed of 500ms for a fadeIn effect between images.
$.backstretch(images[index], { speed: 500 });
// Set an interval that increments the index and sets the new image
// Note: The fadeIn speed set above will be inherited
setInterval(function () {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
}, 5000);
EDIT:
For non-full background, take a look at this post Crossfade Background images using jQuery
Also take a look at this, might be closer to your scenario Cross fade background-image with jQuery
In the link:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
it is said that:
Note: The transitionend event doesn't fire if the transition is aborted because the animating property's value is changed before the transition is completed.
So I went ahead and tried it on http://jsfiddle.net/HA8s2/32/ and http://jsfiddle.net/HA8s2/33/ using Chrome and Firefox.
example: (click on either the left or right box in jsfiddle)
$(".foo").click(function(evt) {
$(".foo").addClass("hide");
setTimeout(function() {
$(".foo").eq(0).removeClass("hide");
}, 3000);
});
$(".foo").on("transitionend", function(evt) {
console.log("wow! transitionend fired for", evt.target, "at time =", (new Date()).getTime() / 1000);
});
this is with a CSS transition duration for 6 seconds:
transition-duration: 6s;
But both kept the animation. The left box actually "animate to a new value in the middle of the original animation", so it took 9 seconds for the left to finish, while the right box took 6 seconds to finish.
In addition, Firefox only have the two events in http://jsfiddle.net/HA8s2/32/ separated by 2 seconds, instead of 3 seconds.
The question is: how do I make the transitionend stop as described in the docs in mozilla.org? (and not by any other brute force method).
(in other words, I want to find out all the situations that the transitionend will not fire and test it out).
Update: I was able to abort the animation if I add display: none to the box on the left, as on http://jsfiddle.net/HA8s2/34/ and won't be able to abort it if it is visibility: hidden as in http://jsfiddle.net/HA8s2/35/ but these do not really "change" the property's value as the docs says -- it is to add or change another property value.
Couldn't you give it a new class that overrides the transition property, removing it?
Your current code is like:
.myelem { transition: 0.5s all; }
You would add this code:
.alsothis { transition: none; }
When you apply the alsothis class to your element, the new transition property value will override the other one, removing the animation effect.