I want to display the animation that I have and also remove the element from the DOM, however by removing this the animation does not show.
I have tried using the setTimeout() function but as I need to target a specific element I cannot work out how to get both to execute!
here is the code:
function anagramHitsTheBottom () {
$('.anagram').each(function () {
const position = Math.round($(this).position().top);
if (position >= 450) {
console.log(lifeScore);
lifeScore -= 1;
$lives.html(Lives Left: ${lifeScore});//Not Working
$(this).css('color','red');
$(this).addClass('animated hinge');
$(this).remove();
}
});
}
please ignore that I haven't used backticks in the ${} I know I need them!
Here's what you missing: You are adding the animation to the element and at the same time, you're removing it from your document.
You could use this extension(scroll a little bit up) for jQuery
$.fn.extend({
animateCss: function (animationName, callback) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
this.addClass('animated ' + animationName).one(animationEnd, function() {
var obj = $(this);
obj.removeClass('animated ' + animationName);
if(callback && typeof callback === 'function') callback(obj);
});
}
});
This will make the animation run just one time and then you can use a callback to remove the element.
$(this).animateCss('hinge', function (obj) {
//This will execute at the end of the animation
obj.remove();
});
Related
I have (and need) one on click cycler-through-images and use this piece of code for this purpose:
$(".wrapper").on("click", function() {
var $content = $(this).find(".content_stack");
if ($content.length > 1) {
var $curr = $content.filter(":visible");
var $next = $curr.is($content.last()) ? $content.first() : $curr.next();
$curr.fadeOut(1000, function() {
$next.fadeIn(1000)
})
}
});
^ JSFiddle
And I have also found on SO (and "adapted") an automatic "twin" for it:
$(".wrapper").each(function() {
var $crossfade = $(this).find(".crossfade_square");
var $zindex = -1;
function loop() {
++$zindex;
$crossfade.eq($zindex % $crossfade.length)
.fadeIn(1000)
.delay(2000)
.fadeOut(1000, loop);
}
loop();
});
^ JSFiddle
UPDATE: Both are working as intended, separately. I need both of them (on click version and automatic version of cycling images). The codes are so different because I can't tweak either of them to work for both cases.:|
The problem: complete fade out>>fade in looks too distracting/"flickering"/"abrupt".
I would greatly appreciate if someone can help me make the crossfade smoother/more subtle/...like one image is turning into another... (if it is possible without adding absolute/relative position in CSS).
Use one function to loop and handle click event.
I split animation in to functions with queue of functions. If FadeIn being called by .onclick the queue is being cleared by .stop(true) method to stop animation and drop the queue.
$(".wrapper").each(function() {
var $this = $(this),
$curr = null,
$crossfade = $this.find(".crossfade_square");
var zindex = -1,
length = $crossfade.length;
function fadeOut() {
if($curr)
$curr.stop(true, false)
.fadeOut(1000, fadeIn);
else
fadeIn();
}
function fadeIn() {
++zindex;
$curr = $crossfade.eq(zindex % length)
.fadeIn(1000)
.delay(5000)
.queue(fadeOut);
}
$this.on("click", fadeOut);
fadeIn();
});
I have updated JSFiddle sample.
I have a script that switches between background images based on where I scroll. I am able to get the background images to switch correctly, but it's been requested that I have the background images fadeIn() instead of simply change. Basically, I'm looping through the background images and I want the previous one to fadeOut() and the next one to fadeIn(). Is it possible to do this? If so, how? Here's the script.
$("#scroll").on("slidestart", function(ev, ui){
$(this).on("mousemove touchmove", function(){
var slider_pos = $("span").offset().top;
$("#menu").find(".schematics").each(function(ev){
var schematic_id = $(this).data("id").split("_")[0];
var schematic_top = $(this).offset().top;
var schematic_height = $(this).height();
var schematic_bottom = (schematic_top + schematic_height);
var url = $(this).data("url");
Here's where the background images change. I thought adding fadeIn() after the css operation would work, but it doesn't.
if((slider_pos >= schematic_top) && (slider_pos <= schematic_bottom)){
$("#plane_image").css("background-image", "url(" +url +")").fadeIn("slow");
$(".vis").hide();
$(".title").hide();
$("#" +schematic_id +"_list").show();
$("#" +schematic_id +"_head").show();
}
})
})
})
jQuery's fadeIn and fadeOut functions have a "complete" function, which is called after the animation has completed. You could try something like this.
var slideTimeout; // global var for any slider timeout
if((slider_pos >= schematic_top) && (slider_pos <= schematic_bottom)){
if(slideTimeout) {
clearTimeout(slideTimeout); // clears the timeout if we detect a new slide movement.
}
slideTimeout = setTimeout(function(){
$("#plane_image").fadeOut("slow", function(){
$("#plane_image").css("background-image", "url(" +url +")").fadeIn("slow", function(){
$(".vis").hide();
$(".title").hide();
$("#" +schematic_id +"_list").show();
$("#" +schematic_id +"_head").show();
});
});
}, 1000); // it will wait 1 second before firing the method again
}
Or you could do it the boolean way.
var inVisibleRegion = false;
if((slider_pos >= schematic_top) && (slider_pos <= schematic_bottom)){
if(!inVisibleRegion) {
$("#plane_image").fadeOut("slow", function(){
$("#plane_image").css("background-image", "url(" +url +")").fadeIn("slow", function(){
$(".vis").hide();
$(".title").hide();
$("#" +schematic_id +"_list").show();
$("#" +schematic_id +"_head").show();
});
});
inVisibleRegion = true;
}
}
else {
inVisibleRegion = false;
}
For further insight, check out jQuery fadeIn() and jQuery fadeOut().
Start a fadeOut, then load the new img and call fadeIn, which fires on completion of the fadeOut (bg = your element)
bg.fadeOut('slow', function () {
bg.load(function () {bg.fadeIn();});
bg.attr("src", newbgdrc);
});
So I have a piece of code. The purpose is to play a selected animation from Animate.css on click.
The code
$(".container>parent").click(function () {
$('.element').css({
'animation': 'fadeInUp .2s',
'-webkit-animation': 'fadeInUp .2s'
});
});
The problem
Animation runs, but only one time. 'Infinite' attribute causes chaos :P
What else could I do, to play that animation every single time someone click it?
Thanks for your time.
My HTML:
<span class="parent">
<img src="assets/myimage.png" class="filter-image">
<span class="element">Text</span>
</span>
I want to animate the text everytime I click it.
$(".container>parent").click(function() {
$('.element').css({
'animation': 'fadeInUp .2s',
'-webkit-animation': 'fadeInUp .2s'
});
setTimeout(function(){
$('.element').removeAttr('style');
},300);
});
The animation won't work the second time if you don't remove animation class after the current animation finishes.
But how to remove animation property after the animation finishes?
Here's a snippet:
var support = {};
support.animation = (function() {
var animationEnd = (function() {
var element = document.body || document.documentElement,
animEndEventNames = {
WebkitAnimation : 'webkitAnimationEnd',
MozAnimation : 'animationend',
OAnimation : 'oAnimationEnd oanimationend',
animation : 'animationend'
}, name;
for (name in animEndEventNames) {
if (element.style[name] !== undefined) return animEndEventNames[name];
}
}());
return animationEnd ? { end: animationEnd } : false;
})();
function animate(elem, cls, callback) {
var $elem = $(elem);
var onEndCallbackFn = function(ev) {
if (support.animation) {
$elem.removeClass(cls);
this.removeEventListener(support.animation.end, onEndCallbackFn);
}
if (callback && typeof callback === 'function') { callback.call(this, ev); }
};
if (support.animation) {
$elem.addClass(cls);
$elem[0].addEventListener(support.animation.end, onEndCallbackFn);
} else {
onEndCallbackFn();
}
}
usage is simple, just call animate function, like this:
animate($('.selector'), 'classWithAnimation', callbackFn);
In you case, you said you are using animate.css library:
$(".container>parent").click(function() {
animate($('.element'), 'animated fadeInUp', function() {
console.log('animation complete');
);
});
Live example: jsFiddle
I want to put a little delay for onmouseout event for a group of sub items in a drop down menu. But I don't want to use css transitions.
I set it with .hover() and setTimeout method but I wanted to put it only for a specific elements in menu - in this case just for sub items so I used if else statement for them. I have no idea why this if else statement does't work.
Here is my javascript code:
var selectors =
{
element: '.main-menu li:has(ul)'
}
var opacityWorkaround = function ($element, value) {
$element.css('opacity', value);
};
var getAnimationValues = function (visible) {
var result = {
visibility: visible
};
result.opacity = visible === 'visible' ? 1 : 0;
};
var mouseActionHandler = function ($element, visible, opacityValue) {
$element
.stop()
.css("visibility", 'visible')
.animate(getAnimationValues(visible),
3000,
function () {
$(this).css("visibility", visible);
opacityWorkaround($(this), opacityValue);
});
};
var onMouseIn = function () {
var $submenu = $(this).children("ul:first");
if ($submenu) {
mouseActionHandler($submenu, 'visible', 1);
}
};
var onMouseOut = function () {
var $submenu = $(this).children("ul:first");
var $global = $('.global').children('ul');
if ($submenu) {
mouseActionHandler($submenu, 'hidden', 0);
} else if ($global) {
setTimeout(function() {
mouseActionHandler($global, 'hidden', 0);
},1500);
}
};
$(selectors.element).hover(onMouseIn, onMouseOut);
I put 1500ms delay and the $global variable is referring to sub items in menu that I want to make disapear with that delay. I wanted to achieve this when user move mouse cursor out of 'some items >' tab.
Here is my fiddle example.
http://jsfiddle.net/PNz9F/1/
Thanks in advance for any help!
In the example you have in your question $submenu always has a value so the else if statement is never run. You can check for a class instead.
var timeout;
var $submenu = $(this).children("ul:first");
var $global = $('.global').children('ul');
if ($(this).hasClass('menu-item')) {
mouseActionHandler($submenu, 'hidden', 0);
mouseActionHandler($global, 'hidden', 0);
clearTimeout(timeout);
} else if ($(this).hasClass('global')) {
timeout = setTimeout(function() {
mouseActionHandler($global, 'hidden', 0);
},1500);
}
you should be able to just use the :hover selector in your code to check whether the user is hovering over the element or not and run code accordingly
There are three images that I have made a tooltip for each.
I wanted to show tooltips within timed intervals say for 2 seconds first tooltip shows and for the second interval the 2nd tooltips fades in and so on.
for example it can be done with this function
function cycle(id) {
var nextId = (id == "block1") ? "block2": "block1";
$("#" + id)
.delay(shortIntervalTime)
.fadeIn(500)
.delay(longIntervalTime)
.fadeOut(500, function() {cycle(nextId)});
}
now what i want is to stop the cycle function when moseover action occurs on each of the images and show the corresponding tooltip. And again when the mouse went away again the cycle function fires.
If I understand everthing correctly, than try this code. Tt stops the proccess if you hover the image and continues if you leave the image. The stop() function will work on custom functions if you implement them like the fadeOut(), slideIn(), ... functions of jquery.
$('#' + id)
.fadeIn(500, function () {
var img = $(this).find('img'),
self = $(this),
fadeOut = true;
img.hover(function () {
fadeOut = false;
},
function () {
window.setTimeout(function () {
self.fadeOut(500);
}, 2000);
}
);
window.setTimeout(function () {
if (fadeOut === false) {
return;
}
self.fadeOut(500);
}, 2000);
});