We Keep Coding

Child elements starting opacity while using velocity.js and blast.js

I have a simple wrapper div that I animate in using velocity.js UI pack. In the complete callback function, I am using a combination of UI pack and blast.js to animate three sentences.
The problem is that my sentences are initially shown, and only after that they are animated. They shouldn't be visible after the wrapper div is animated into view.
Everything is working fine if I don't animate the wrapper div, guess the opacity settings during animation are messing with child elements.
$('.wrap').velocity('transition.slideUpIn', {
delay: 1000,
display: null,
complete : function(){
$(".animated")
.blast({ delimiter: "character" })
.velocity("transition.fadeIn", {
display: null,
duration: 1000,
stagger: 60,
delay: 400
});
}
})
Here is the fiddle to see the problem : http://jsfiddle.net/vcsr6aqj/1/

The problem is that your p tags aren't at opacity: 0, but only their characters, which are inside a span having as class blast. Since your invisible characters are only created when you call $(".animated").blast({ delimiter: "character" }), which means once your wrapper has completed its apparition, the sentences will be visible until then. So you have two possibilities that I can think of.
Create your span characters with blast at the page load, instead at the wrapper velocity complete and then call velocity on your created spans:
$(document).ready(function() {
$(".animated").blast({ delimiter: "character" });
$('.wrap').velocity('transition.slideUpIn', {
delay: 1000,
display: null,
complete : function(){
$(".animated .blast").velocity("transition.fadeIn", {
display: null,
duration: 1000,
stagger: 60,
delay: 400
});
}
})
});
JSFiddle example
Add a class to your p tags having opacity: 0:
<p class="animated no-opacity">Sentence number one.</p>
<p class="animated no-opacity">Sentence number two.</p>
<p class="animated no-opacity">Just one sentence more.</p>
CSS:
.no-opacity {
opacity: 0;
}
When your wrapper has completed the velocity, remove the class from your p tags. Also, remove delay: 400 from your velocity attributes, otherwise the sentences will show for 400 milliseconds:
$(document).ready(function() {
$('.wrap').velocity('transition.slideUpIn', {
delay: 1000,
display: null,
complete : function(){
$animated = $(".animated");
$animated.removeClass("no-opacity");
$animated.blast({ delimiter: "character" })
.velocity("transition.fadeIn", {
display: null,
duration: 1000,
stagger: 60
});
}
})
});
JSFiddle example

Here you go (fiddle). I'm sure there are more elegant solutions.
It appears that the slideUpIn animates opacity from 0 to 1, including the opacity of .animated which is probably 'inherited'. Setting it to 0 to hide it fixes it, but then .blast() doesn't work, so we enable it again.

overflow-y: scroll causing issues with JQuery

When I add overflow-y:scroll to the .nav styling the button to open the navigation requires 2 clicks. Change this to overflow: none and it only requires 1 click as intended when using the following jquery:
$(function(){
var nav = $('.nav'),
navBut = $('.navBut');
navBut.click(function(){
if(nav.width() === 0){
nav.stop().animate({ width: '15%', opacity: '1.0' }, 300);
} else {
nav.stop().animate({ width: '0', opacity: '0.0' }, 300);
}
});
Can anybody see why this would be the case or how I can solve this?
http://jsfiddle.net/9ubxyw0t/2/

Rather than checking if the width of .nav is equal to 0, you need to check to see if it is less than or equal to 0.
Your original issue only seemed to effect certain browsers. It seems like some browsers would give the element a negative width when the overflow property was set to scroll. I guess this is just a cross-browser rendering inconsistency.
Updated Example
var nav = $('.nav'),
navBut = $('.navBut');
navBut.on('click', function () {
if (nav.width() <= 0) {
nav.stop().animate({
width: '15%',
opacity: '1.0'
}, 300);
} else {
nav.stop().animate({
width: '0',
opacity: '0.0'
}, 300);
}
});

Velocity.js clearing default values after animation

I have elements on a page that I want to animate in to view, but after they've animated in, I want to defer further animation on them to CSS (by changing classes)... I am finding that Velocity leaves all my animated properties in the style= tag and makes CSS transitions impossible.
I have a solution below, but resetting the CSS on complete seems iffy, I was wondering if there's a better way to do it?
// first use CSS to hide the element and squish it
$el.css({
width: 0,
left: "-10px",
opacity: 0,
marginRight: 0,
transition: "none"
})
// now animate the width and margin (do this first
// so there's a little gap between existing elements
// before we fade in new element.
.velocity({
width: width,
marginRight: margin
}, {
queue: false,
duration: 230
})
// then fade and move in the new element,
// but this is the iffy bit when it completes
// I have to unset all the styles I've animated?
.velocity({
left: 0,
opacity: 1
}, {
queue: false,
duration: 100,
delay: 130,
complete: function(els) {
$(els).css({
width: "",
left: "",
opacity: "",
marginRight: "",
transition: ""
});
}
});

Typically, you want animation engines to leave styles inline; otherwise final values will pop as they get overwritten by stylesheets upon removal.
You can also do $(els).attr("style", ""); to just clear all styles.

Jquery pulsate from different colors [duplicate]

This question already has an answer here:
Jquery pulsate changing color or image
(1 answer)
Closed 9 years ago.
I want to pulsate from white to another color but i'm not sure how to add color to this code
<script>
$(document).ready(function() {
$("#white36").click(function () {
$('#book').effect("pulsate", { times:3000 }, 500);
});
});
</script>

You are going to need this plugin to animate colors with jquery (its not there be default):
http://www.bitstorm.org/jquery/color-animation/
then you can do something like:
var pulsateInterval = null, i = 0;
$(document).ready(function() {
$('#white36').click(function() {
// set interval to pulsate every 1500ms
pulsateInterval = setInterval(function(){
// animate back and forth
$('#book').animate({
background-color: 'red',
}, 500).animate({
background-color: 'white',
}, 500);
i++;
// stop at 3000 pulsations
if(i == 3000){
clearInterval(pulsateInterval);
}
}, 1500);
});
});

Pulsate only changes de opacity of an element, not the color. You can put an element with white background below your element to get what you want.
Like:
<div style="background:#ffffff;"><div id="my_elem" style="#006600"></div></div>

you could recreate the pulsing effect you want using animate in this way:
$(document).ready(function() {
$('#white36').click(function() {
$('#book').animate({
background-color: 'red',
}, 300).animate({
background-color: 'white',
}, 300).animate({
background-color: 'red',
}, 300);
});
});

for some ideas:
$(document).ready(function() {
$("#white36").click(function () {
$("#book").animate({
width: "50%",
opacity: 0.3,
fontSize: "3em",
borderWidth: "10px",
color: "black",
backgroundColor: "green"
}, 1500 );
});
});
edit: just tried to run the above code and it didn't work when background-color was specified. If i ran it without that param it worked fine though. Guess it's buggy as I tried with both "background-color" and "backgroundColor"

fadeOut() and slideUp() at the same time?

I have found jQuery: FadeOut then SlideUp and it's good, but it's not the one.
How can I fadeOut() and slideUp() at the same time? I tried two separate setTimeout() calls with the same delay but the slideUp() happened as soon as the page loaded.
Has anyone done this?

You can do something like this, this is a full toggle version:
$("#mySelector").animate({ height: 'toggle', opacity: 'toggle' }, 'slow');
For strictly a fadeout:
$("#mySelector").animate({ height: 0, opacity: 0 }, 'slow');

Directly animating height results in a jerky motion on some web pages. However, combining a CSS transition with jQuery's slideUp() makes for a smooth disappearing act.
const slideFade = (elem) => {
const fade = { opacity: 0, transition: 'opacity 400ms' };
elem.css(fade).slideUp();
};
slideFade($('#mySelector'));
Fiddle with the code:
https://jsfiddle.net/00Lodcqf/435
In some situations, a very quick 100 millisecond pause to allow more fading creates a slightly smoother experience:
elem.css(fade).delay(100).slideUp();
This is the solution I used in the dna.js project where you can view the code (github.com/dnajs/dna.js) for the dna.ui.slideFade() function to see additional support for toggling and callbacks.

The accepted answer by "Nick Craver" is definitely the way to go. The only thing I'd add is that his answer doesn't actually "hide" it, meaning the DOM still sees it as a viable element to display.
This can be a problem if you have margin's or padding's on the 'slid' element... they will still show. So I just added a callback to the animate() function to actually hide it after animation is complete:
$("#mySelector").animate({
height: 0,
opacity: 0,
margin: 0,
padding: 0
}, 'slow', function(){
$(this).hide();
});

It's possible to do this with the slideUp and fadeOut methods themselves like so:
$('#mydiv').slideUp(300, function(){
console.log('Done!');
}).fadeOut({
duration: 300,
queue: false
});

I had a similar problem and fixed it like this.
$('#mydiv').animate({
height: 0,
}, {
duration: 1000,
complete: function(){$('#mydiv').css('display', 'none');}
});
$('#mydiv').animate({
opacity: 0,
}, {
duration: 1000,
queue: false
});
the queue property tells it whether to queue the animation or just play it right away

Throwing one more refinement in there based on #CodeKoalas. It accounts for vertical margin and padding but not horizontal.
$('.selector').animate({
opacity: 0,
height: 0,
marginTop: 0,
marginBottom: 0,
paddingTop: 0,
paddingBottom: 0
}, 'slow', function() {
$(this).hide();
});