For my website, I am trying to fade out part of a word, replace it, and then fade it back in. I am using animate.css to do this along with jquery.
HTML
<h1>D<span id="span-header">iscover</span></h1>
JavaScript
$("#span-header").addClass("animated fadeOut");
setTimeout(function() {
var newText = $("#span-header").text().replace("iscover", "ispicio");
$("#span-header").text(newText);
}, 700);
$("#span-header").addClass("animated fadeIn");
What it is doing is fading out and replacing the text but it does not fade back in. What am I doing wrong?
1st: you need to Move the code for .addClass("fadeIn") inside setTimeout call back function
2nd: use .removeClass('fadeOut') to remove fadeOut class before adding fadeIn class
Demo
$("#span-header").addClass("animated fadeOut");
setTimeout(function() {
var newText = $("#span-header").text().replace("iscover", "ispicio");
$("#span-header").text(newText);
$("#span-header").removeClass('fadeOut').addClass("fadeIn");
}, 700);
Related
http://jsfiddle.net/pdb4kb1a/2/
The code works just fine on JSFiddle, but I cant get it to work when I use it in a HTML/CSS file. Only the 50x200 image is displayed, no signs of the simple slideshow or fade effect. I work in Sublime text, could that create any problems?
var imgArray = [
'http://placehold.it/300x200',
'http://placehold.it/200x100',
'http://placehold.it/400x300'],
curIndex = 0;
imgDuration = 3000;
function slideShow() {
document.getElementById('slider').className += "fadeOut";
setTimeout(function() {
document.getElementById('slider').src = imgArray[curIndex];
document.getElementById('slider').className = "";
},1000);
curIndex++;
if (curIndex == imgArray.length) { curIndex = 0; }
setTimeout(slideShow, imgDuration);
}
slideShow();
#slider {
opacity:1;
transition: opacity 1s;
}
#slider.fadeOut {
opacity:0;
}
<body>
<img id="slider" src="http://placehold.it/50x200">
</body>
JSFiddle executes the javascript code in the window.onload event. You can change this if you click the JavaScript Button in the editor of JSFiddle.
If you change it to No wrap - in <head> you'll see that it doesn't work as well. You should see an error in your console, telling you the reason.
I'm assuming that you're including your script snippet in the head section of your HTML Document.
If you take your code as posted in your question, your slider isn't loaded yet, because the script is executed before your HTML document is fully loaded. You have to wrap the call to your slideShow function inside the onloadevent (or if you're using jQuery you'll probably use $(document).ready(function(){ ... }) instead.
This should do the trick then:
window.onload = function() {
slideShow();
}
Including the script at the bottom of your HTML document should work as well as an alternative.
I don't know how much people have used this plugin, demo but what I want is to change the default behavior of the plugin to something like animated. Currently, when you click on next or previous button, the images will be just appended without any visual animation. I just want to animate the images while appending! Can anybody suggest any good solution!! Below is the code where appending on the image takes place:
if (href.match(/\.(jpeg|jpg|gif|png)$/i) !== null) {
var img = $('<img>', { src: href });
img.one('load', function () {
var wrap = $('<div class="nivo-lightbox-image" />');
wrap.append(img); //gets appended here
content.html(wrap).removeClass('nivo-lightbox-loading');
// Vertically center images
wrap.css({
'line-height': $('.nivo-lightbox-content').height() + 'px',
'height': $('.nivo-lightbox-content').height() + 'px' // For Firefox
});
}).each(function () {
if (this.complete) $(this).load();
});
}
OK with any sort of animation
Well I just added a fadeIn after appending which seems to do some sort of animation although which is what I was accepting. Here is what I did:
wrap.append(img).fadeIn('4000');
http://api.jquery.com/fadeOut/ <- fadeOut api
I'm trying to learn Javascript and I've been playing with a snippet I found on Codepen.
I'm having trouble trying to get the random text array snippet to have the text fadeOut when it transitions away to another text object. Right now, the array cycles through and randomly selects a string from the array using the Math.Random function (5*1) and it fades in each time a new text object loads in, however I want it to fade out and I don't think I'm utilizing the .fadeOut property properly. How can I get it so that the text fadesOut, so the text does fadeIn fadeOut, instead of fadeIn, insta kill?
var textTimer;
var inTransition = false;
startTimer();
function startTimer() {
clearTimeout(textTimer);
textTimer = setTimeout(changeTitle, 3500);
}
changeTitle();
var titleNumber = Math.floor(Math.random() * 5) + 1;
function changeTitle() {
var titleArray = [
"Test1",
"Test2",
"Test3",
"Test4",
"Test5"
];
var tempTitleLength = titleArray.length - 1;
if (inTransition == false) {
inTransition = true;
titleNumber++;
if (titleNumber > tempTitleLength){
titleNumber = 0
}
$('.text').html('');
$('.text').css({opacity: '0'});
$('.text').html(titleArray[titleNumber]);
$('.text').fadeOut();
$('.text').stop().delay(0).animate({
opacity: 1
}, 1500, function() {
inTransition = false;
startTimer.()
});
}
}
Thanks! :D
The HTML is pretty straight forward
<div class="text"></div>
Multiple problems:
$('.text').html('');
$('.text').css({opacity: '0'});
$('.text').html(titleArray[titleNumber]);
You are already removing the text in html('') without fading out,
setting css opacity to 0 without any delay, setting html new text without any animation.
There is a syntax error also startTimer.() I guess is typo.
Remove first 2 lines and set new text after fade out is done.
You also need to wait for fadeOut to finish before doing fadeIn.
So, sequence: fadeOut, set new text, fadeIn.
Like this:
$('.text').fadeOut(1500, function () {
$('.text').html(titleArray[titleNumber]);
$('.text').fadeIn(1500, function () {
inTransition = false;
startTimer()
});
});
JSFiddle: http://jsfiddle.net/Dzyzw/
You have syntax errors in your code: you have startTimer.() should be startTimer() and you did not close your startTimer function with a }. I corrected this for you and set up a sample JSFiddle for you review. Seems to be working otherwise.
Here is the sample JSFiddle: CLICK HERE
Here's what I think you're going for--
Set initial text.
Fade out your text.
Change the text.
Fade in the new text.
Wait a while, then return to step 2.
I would drop all the transition flags and use the optional callback functions that are fired when fadeOut and fadeIn complete to move from step to step, e.g.
$('.text').fadeOut(1000, function() {
$('.text').html(get_next_word());
$('.text').fadeIn(500);
});
Just fire that off on a timer that is 1500 milliseconds + the time you want the text to be fully visible.
I have typed some code to fade in and out some divs including a navigator.
I've noticed a bug when you click the navigator fast and try to change between divs very fast by spamming the buttons, the div's will be bugged and if you will inspect the code, you will see that the divs are fading in up to 0.5 opacity, or sometimes even 0.12 and fades out to 0.0 up to 0.09 or something like that.
This is my code:
$(document).ready(function(){
var currentDiv = $("#fading_divs div:first");
currentDiv.css("display","block");
var divN = $("#fading_divs div").length;
var fadeInterval;
for(i=0; i<divN; i++){
$('<span />').text(i+1).appendTo('#fade_nav');
}
$('#fade_nav span').eq(0).addClass('active');
$('#fade_nav span').click(function(){
clearInterval(fadeInterval);
$('#fade_nav span').removeClass('active').eq( $(this).index() ).addClass('active');
currentDiv.fadeOut({duration:1000,queue:false});
currentDiv = $("#fading_divs div").eq( $(this).index() );
currentDiv.fadeIn({duration:1000,queue:false});
anim();
});
function anim() {
fadeInterval = setInterval(function(){
currentDiv.fadeOut({duration:1000,queue:false});
if(currentDiv.next().length)
currentDiv = currentDiv.next();
else
currentDiv = currentDiv.siblings().first();
$('#fade_nav span').removeClass('active').eq( currentDiv.index() ).addClass('active');
currentDiv.fadeIn({duration:1000,queue:false});
}, 4000);
}
anim();
});
Here is a fiddle: http://jsfiddle.net/b5PfE/
try to spam the nav buttons until you will see that the divs are barely fading in or out.
Any suggestion about how to fix it?
This is how I usually solve issues like that:
Add a class to your #fade_nav span of "activated"
Use $('.activated').live('click', function (event) { // }); to start your function
Within that function, first remove the activated class from #fade_nav. This will prevent the buttons from being clickable during your animation.
At the end of the function, add the .activated class back on so the buttons are clickable once more.
In an UL list do I want to animate the first LI inside. The first animation will remove the CSS class for the blue background and adds a new CSS to it to make it have a dark background. It also adds a new a line of code inside. The second animation will push the same div up with a fade on it so it disappears. Then it will get removed.
Both animations I have tested separated by commenting out the other animation and work proper.
The problem is that I can't run them together, if I do the first animation then the second animation won't work at all.
listTop = $('#ypPlaylist > ul li:first');
setTimeout(function ()
{
listTop.css('background', '#2d89ef').removeClass('bg-color-blue');
listTop.animate({ backgroundColor: '#1d1d1d' }, 300);
listTop.prepend('<b>Running: </b>').fadeTo(300);
}, 1000)
setTimeout(function ()
{
listTop.animate({ marginTop: '-=82px', opacity: 0 }, 800, function ()
{
listTop.remove();
});
}, 3000);
You can concatenate everything together, set a delay in between and remove the setTimeouts-function.
Checkout http://api.jquery.com/animate/ and http://api.jquery.com/delay/
There is also a short example $('#foo').slideUp(300).delay(800).fadeIn(400);