Develop Reference

jQuery Animate - jumps then

Having an issue with a div content swap, where I want to animate in content then having it disappear if another element is clicked.
I have the content swap working correctly, but it "appears" without the animation. this happens for all elements upon first load. If you click the elements again, then the animation executes properly.
You can find my example here:
https://jsfiddle.net/aebguh3k/7/
Sample code:
$(document).ready(function() {
$('#select').on('click', 'a', function() {
$('.current').not($(this).closest('a').addClass('current')).removeClass('current');
$('.cselect:visible').hide().animate({
opacity: '0.0'
}, "slow");
$('.cselect[id=' + $(this).attr('data-id') + ']').show().animate({
opacity: '1.0'
}, "slow");
});
});
How can I fix the code so it animates properly

The opacity property is not added to your div, until the click handler is triggered. So there is anything that can be animated.
adding an initial style will help: https://jsfiddle.net/aebguh3k/8/
CSS:
.cselect {
opacity: 0;
}
JS:
$('.cselect:first').css({'opacity': '1'});

Just add to css:
#div2,
#div3,
#div4 {
opacity: 0;
}

How can I animate a div to the right when it is pressed, and then, when it is pressed again, return it back to its first position with jQuery?

I have multiple clickable panels made with Bootstrap class panel, organized in this way:
Image of my website naoh
For example, when I click on the first panel, some other panels appear and cool stuff happens.
When you click a panel.
But I want that the panel that I clicked to be at the center. And then, when that same panel is clicked, I want to return everything to normal (which right now works with the specific panels per panel), including the main panel, so it should move to the left. The panels at the center doesn't require animation, and the right ones should animate to the left and back to the right.
Here is my jQuery code for the panels, lets say panel 2:
//Panel 2
if ($("#panel_2").data("clicked")) {
$(".navegadores").toggle(function () { });
} else {
$(".navegadores").hide();
}
$("#panel_2").click(function () {
$("#panel_2").data('clicked', true);
$(".navegadores").toggle(function () { });
console.log($("#panel_2").data("clicked"));
});
I feel I would need to use the .toggle method somehow, or the .slideToggle, but I'm quite confused atm.

Something like this should get you started:
$('#panel2').click(function(){
if ( $(this).data('clickstate') == 0 ){
$(this).animate({
marginLeft: '200px'
},1000, function(){
$(this).data('clickstate', '1');
});
}else{
$(this).animate({
marginLeft: '0'
},1000, function(){
$(this).data('clickstate', '0');
});
}
});
#panel2{position:relative;height:100px;width:100px;background:green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="panel2" data-clickstate="0"></div>

Script not firing properly after preloader script

Very limited script experience.
I am attempting to get a preloader to cover my images loading in a bootstrap carousel before a second script cycles through them.
This script is as far as I can get.
<!-- Preloader -->
<script type="text/javascript">
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(50).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(50).css({'overflow':'visible'});
})
//]]>
</script>
and
<!-- Script to Activate the Carousel -->
<script type="text/javascript">
$('#preloader').delay(50).fadeOut('slow', function(){
$('.carousel').carousel({
pause: "none",
interval: 500
});
});
</script>
The sequence I need is loading animation div covering images loading in "#myCarousel" > images have loaded > covering div fades out > fade out calls:
$('.carousel').carousel({
interval: 500, //changes the speed
pause: "none",
})
Images flick through and stops on final slide.
In the example above, it seems to work – the preloader works, the carousel works too but not at the expected speed; "500" is meant to be half a second. It also seems to break the pause function to, the fact pause is set to "none" seems to be ignored.
After some help from #Shikkediel the script now reads:
<script type="text/javascript">
$(window).on('load', function() {
$('#status').fadeOut()
.queue(function() {
$('#preloader').delay(50).fadeOut('slow', function() {
$('#myCarousel').attr('data-ride', 'carousel');
$('.item').first().addClass( 'active' );
$('body').delay(50).css({'overflow':'visible'});
$('.carousel').carousel({
});
});
$(this).dequeue();
});
});
</script>
– the speed and pause are now set in the data attributes, which is great to have them set in there out of the way.
However, the preloader still does not pre load the images!
This is the test I have running: http://maxsendak.com/test/pu_v2/max_page.html

This was the first draft, a bit of optimised script :
$(window).on('load', function() {
$('#status').fadeOut()
.queue(function() {
$('#preloader').delay(50).fadeOut('slow', function() {
$('#myCarousel').attr('data-ride', 'carousel');
$('.item').first().addClass('active');
$('body').delay(50).css({'overflow':'visible'});
$('.carousel').carousel({
interval: 500,
pause: 'none'
});
});
$(this).dequeue();
});
});
But it didn't quite have the expected result - the images are set as background and not detected by the onload event. I would propose preloading, appending to the document and hiding. This should cache them for the slider. Doing an Ajax call doesn't seem to fit well here :
$(document).ready(function() {
var path = 'http://www.maxsendak.com/test/pu_v2/img/people/max/';
for (var i = 1; i <= 5; i++) {
$('<img class="preload" src="' + path + i + '.jpg" alt=""/>').appendTo('body');
}
$('.preload').each(function() {
$(this).one('load', function() {
$(this).hide();
});
});
$(window).on('load', function() {
$('#status').fadeOut()
.queue(function() {
$('#preloader').delay(50).fadeOut('slow', function() {
$('#myCarousel').attr('data-ride', 'carousel');
$('.item').first().addClass('active');
$('body').delay(2500).css({'overflow':'visible'}); // after slider finishes
$('.carousel').carousel();
});
$(this).dequeue();
});
});
});
That bit of script could be left out of course if the images weren't background, the onload event should then be enough and prevent the flashing in between slides.
Minor update - according to this article Firefox can have some issues (version 37 on Windows 7 desktop at least) with the style of the preloaded images not matching that of the targeted background images. So I've added the relevant style I can see on the slider here which should be enough (also made appending the images a bit more readable) :
for (var i = 1; i <= 5; i++) {
$('<img class="preload" alt=""/>')
.attr('src', path + i + '.jpg')
.css({'height': '100%', 'position': 'relative', 'left': 0})
.appendTo('body');
}
Hope that's the final detail for a smooth cross browser functionality.

fullpage.js how to attach fixed menu to second section

By default, menu appears on every page. I want to make the menu not to appear on first page. I did the following:
$('#fullpage').fullpage({
verticalCentered: true,
scrollingSpeed: 600,
css3: true,
onLeave: function(index, nextIndex, direction){
if (index == 2 && direction == 'up'){
$('#menu').css('visibility','hidden');
}
},
afterLoad: function(anchorLink, index){
if (index == 2){
$('#menu').css('visibility','visible');
}
}
Now the menu appears when I scroll to the second page and hides when I scroll to the first page. But in this way the menu is not the part of second page, it just changes visibility depending on position.
I want the following: when it scrolls to the first page, the menu should stay on the second. And conversely, when it scrolls from the first page to the second, the menu should be on the second page.
P.S. Now in html, menu is placed outside the full page wrapper.
P.P.S. The website will have more than two pages and I want to attach menu to the top of the window.
P.P.P.S. I've done what I wanted. But it works bad - http://jsfiddle.net/a3dw6p4w/

I want the following: when it scrolls to the first page, the menu should stay on the second.
Use a fixed position for the menu. That's a thing for CSS, not for jQuery:
#menu{
position:fixed;
top: 30px;
left: 30px;
z-index:999;
}

Here is how you can do it:
Javascript
<script>
$(document).ready(function(){
$('#fullpage').fullpage({
verticalCentered: true,
scrollingSpeed: 1200,
css3: true,
afterLoad: function(anchorLink, index){
if (index > 1){
$('#menu').fadeTo("slow",1);
}
},
onLeave: function(index, nextIndex, direction){
if (index == 2 && direction == 'up') {
$('#menu').fadeTo("slow",0);
}
}
});
});
</script>
It says that if on page load, if you scroll to a section below (index > 1), then the menu will fade in slowly.
Then, if you scroll up from the second section (i.e. to section 1), it will fade out slowly.

Jquery: how to: when UL is shown, have first LI animate 'left' 20px, then to 0px, then have the second LI do that, then third, etc

When UL.chapters is 'slideDown', have the first 'chapters LI' animate the 'left' property to 20px, then animate back to 0px, then have the second LI do the same thing, then have the third, and so-on. with my code, they all animate directly after UL.chapters slides down, how do I make them do their animation 1 at a time, with the second not starting until the first has finished, etc.
$('h1').click(function() {
$('UL.chapters').slideDown(500);
$('.chapters LI').each(function() {
$(this).animate({'left':'20px'});
$(this).animate({'left':'0px'});
});
});
code updated.

Try this:
$(function() {
$('h1').click(function() {
$('.chapters').slideDown(500, function() {
doSlide($('.chapters li:first'));
});
});
});
function doSlide(current) {
$(current).animate({
'left': '20px'
}, function() {
$(current).animate({
'left': '0px'
}, function() {
doSlide($(current).next('li'));
});
});
}
This calls the slide animation function on the first <li> and then in the callback for the animation that slides it back to the starting position, it calls the function on the next <li>.
Here's a demo of it in action: http://jsfiddle.net/CBNgR/

Have you noticed the 4th line of your code is $('chapters LI') instead of $('.chapters LI')?
Also you're repeating yourself here. Try this:
$('h1').click(function() {
$('UL.chapters').slideDown(500);
$('.chapters LI').each(function() {
$(this).animate({'left':'20px'});
$(this).animate({'left':'0px'});
});
});
Also make sure that your LIs are set to position absolutely, or else your left animate will have issues.