Develop Reference

How to make two elements appear and disappear on a top of each other in an infinite loop

I trying to make header one disappear, then header two appear and disappear and header one appear in a loop. The problem with my code is, that header two appears only for very short amount of time and empty screen follows for at least 2-3 seconds before header one appears.
JS:
var h1 = $('.header_one');
var h2 = $('.header_two');
setInterval(function(){
h1.fadeOut(1000);
h2.fadeIn(1000);
h2.fadeOut(2000, function() { h1.fadeIn(); });
}, 4000);
HTML:
<h1 class="header_one"> HEADER ONE </h1>
<h2 class="header_two"> HEADER TWO </h2>
CSS:
h1, h2 {
z-index: 10;
position: relative;
}
h2 {display: none;}
There is also a problem: when header two disappears, my two links underneath h1 and h2, that are set to position: relative; move to the top of the page.

Here's one way to do it: jsfiddle
$("#box1").hide();
function animate() {
$("#box2").fadeOut(1000, function() {
$("#box1").fadeIn(1000, function() {
$("#box1").fadeOut(1000, function() {
$("#box2").fadeIn(1000, animate);
});
});
});
}
animate();
div {
position: absolute;
left: 20px;
top: 20px;
background: red;
width: 50px;
height: 50px;
}
div:nth-child(2) {
left: 30px;
top: 30px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1"></div>
<div id="box2"></div>

The reason why your links are moving up when the headers disappear is because the fadeIn and fadeOut are manipulating the display property which removes it from the flow of the document. Only the visibility property would retain the element's position and reserve the space for it.
Assuming that your 2 headers look the same in terms of styling, why not use just one and change the text inside it while animating the color/transparency?
But if you really want to fire them in sequence given your code then you need to do what you did on the last line, where one is a callback when the other finishes; however, this won't fix your links moving up problem.
This is a really nasty/bad way of doing it, but it works...
setInterval(function(){
$('h1').fadeOut(function(){
$('h2').fadeIn();
});
}, 4000);
setInterval(function(){
$('h2').fadeOut(function(){
$('h1').fadeIn();
});
}, 8000);

this is my option to do a loop with jquery animate:
https://jsfiddle.net/vbw8jLko/
var h1 = $('.header_one');
var h2 = $('.header_two');
function loop(){
console.log('llop');
$( ".header_one" ).stop().css('opacity', 0).show().animate({opacity:1}, 700).delay(700).animate({
opacity: 0
}, 1000, function(){
$(this).hide();
$( ".header_two" ).stop().css('opacity', 0).show().delay(100).animate({
opacity: 1
}, 1000).delay(700).animate({opacity:0}, 1000, function(){
$(this).hide(); loop()});
});
}
loop();
Expect like it :)

Animate div from height: 0px to auto failing on first click

I'm trying to animate a block element from 0px to auto. However, on first click it just instantly shows at its auto height. After the first click, it animates to visible and invisible smoothly just fine.
CSS:
.item .comments {
display: none;
overflow: hidden;
background: #f7f8fb;
padding: 0 10px;
margin: 0;
}
JS:
$(document).on('click', '.btn-comment', function(){
var comments = $(this).closest('.item').find('.comments');
if (!comments.is(':visible')) {
comments.show().velocity({
height: comments.get(0).scrollHeight
}, 250, function(){
$(this).height('auto');
}, 'ease');
} else {
comments.velocity({
height: 0
}, 250, function(){
$(this).hide();
}, 'ease');
}
});

Try using slideToggle() like this:
$(this).closest('.item').find('.comments').slideToggle();

Looks like you've just forgotten to type
height: 0;
in the CSS. This makes it set to auto in the beginning.

I think in jQuery is not such a function you can toggle click so i made for you one, https://jsfiddle.net/moongod101/zobbvm79/ I'm new to JS,and i think the animation you can give it to css,and addClass and removeClass is the main point of this action

Cycle Through Multiple Body Background Images

I'm new to development so please go easy on me. Everything I code is from scratch and my own.
I've began creating a body background image slider for one single page of my eCommerce platform and I'm a bit stuck on where to go next with it.
Please see here:
https://zoeyplayground-com.zoeysite.com/lookbook
Currently it is able to fade the body background when clicking the next and previous buttons, but I can't work out a way that this can be converted to handle more than one image per button. I will need the slider to be able to cycle through multiple body background images.
Please see the code below:
HTML
<!-- Remove header from lookbook page and add background1 -->
<script>
jQuery(document).ready(function() {
if (top.location.pathname === '/lookbook')
{
jQuery("body").addClass("background1");
jQuery("#root-header-cp-41e961ff2cbb3d4e6ae72927272f2db5").addClass("removeheader");
}
});
</script>
<!-- Toggle background2 when 'next' is clicked -->
<script>
jQuery(document).ready(function() {
jQuery(".next").click(function() {
jQuery("body").removeClass("background1");
jQuery("body").addClass("background2");
});
});
</script>
<!-- Toggle background1 when 'back' is clicked -->
<script>
jQuery(document).ready(function() {
jQuery(".back").click(function() {
jQuery("body").removeClass("background2");
jQuery("body").addClass("background1");
});
});
</script>
<!-- Container and images -->
<div id="toggle" width="100%">
<img src="/media/import/back.png" class="back">
<img src="/media/import/next.png" class="next">
</div>
CSS
/* Min-height due to hard-coded height issue */
.root-body {
min-height: 0 !important;
}
/* Transition for background image changes */
body {
transition: all 0.5s ease-out !important;
}
/* Hide footer on all pages */
.root-footer {
display: none;
}
/* Removeheader class for the lookbook page */
.removeheader {
display: none;
}
/* Body background options */
.background1 {
background: url('/media/import/background1.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
}
.background2 {
background: url('/media/import/background2.jpg') no-repeat center center fixed;
background-size: cover;
overflow: hidden;
}
/* Toggle Buttons */
#toggle .next {
float: right;
}
#toggle img {
margin-top: 400px;
display: inline;
}
#toggle img:hover {
cursor: pointer;
opacity: 0.8;
}
Any advice or guidance on what I should do next is greatly appreciated. Thank you for your time.

try this:
jQuery(document).ready(function() {
var current = 1; // current background index
var max_backgrounds = 2; // number of backgrounds it will work with any number
jQuery(".next").click(function() {
jQuery("body").removeClass("background" + current);
// next background index or first one if it's the last one
current++;
if (current > max_backgrounds) {
current = 1;
}
// change background to background1, background2 ...
jQuery("body").addClass("background" + current);
});
jQuery(".back").click(function() {
jQuery("body").removeClass("background" + current);
// previous background index or last one if current is the first one
current--;
if (current < 1) {
current = max_backgrounds
}
// change background to background1, background2 ...
jQuery("body").addClass("background" + current);
});
});

How to make a partially hidden div?

I want to make a half shown div in a page, like a footer. When I click it I want it to slide up. The div will contain information on it.
I achieved this somehow, but my problem is that the div does not get really hidden it just changes the position.
You can find the demo here: http://jsfiddle.net/8ZFMJ/394/
var clicked=false;
$(".two").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"bottom": -430});
}
else
{
clicked=true;
$(".two").css({"bottom": "-200px"});
}
});

I had a similar problem a while ago, in fact I think it was my first stackoverflow question. Unfortunately it got poorly received.
Anyway, the problem is currently that you are just changing the position of the div - that's what .bottom does. I think what you want to do is change the height, see this JSFiddle in which I managed to switch the div between states (no animation yet).
It makes simple use of css's overflow-y: hidden; to hide the div's contents when it is small, and all the JS does is toggle between heights:
if(clicked)
{
$(".two").css("height", 10);
}
else
{
$(".two").css("height", 250);
}
clicked = !clicked;
clicked = !clicked just flips the boolean state of the variable.
Now, to add the animation, we can use jQuery's .animate and produce this beautiful Fiddle
Basically, all we had to do in between is use animate instead of css. Simple, really.
TL;DR
final JSFiddle

.two must be absolute positioned inside .container that must be relative positioned. Then you just change the bottom with a negative value and that will hide the footer.
CSS:
html, body { height: 100%; }
.container {
position: relative;
height: 100%;
overflow: hidden;
}
.two {
position: absolute;
background-color: yellow;
width: 100%;
height:250px;
bottom: -200px;
transition: bottom 1s;
}
jQuery:
var clicked=false;
$(".two").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"bottom": "-200px"});
}
else
{
clicked=true;
$(".two").css({"bottom": 0});
}
});
http://jsfiddle.net/8ZFMJ/398/

Adding Flag to javascript (hasClass)

So I have images where when you click they expand (via css). However, I also want it so that when you click, the image will be pushed to the top of the page. From what I've heard is that if I use the toggleClass function then I need to have a flag before I initiate the animation, however, I can't seem to get it to function right.
$("img").on("click", function (){
$(this).toggleClass("selected");
if ($("img").hasClass("selected")) {
found = true;
}
var timeout = setTimeout(function () {
$('html,body').animate({
scrollTop: $('.selected').offset().top - 60
}, 100);
}, 5);
});

You should consider using CSS3 transition rather than monitoring using timers. You set transition to transition the top property. Then have the selected class alter the top by toggling it. The change will cause the animation to kick in. See this example:
HTML:
<div class="bar">weee!</div>
CSS:
.bar{
width: 100px;
height: 100px;
background: red;
position: relative;
transition: top 1s ease 0;
top: 100px;
}
.bar.selected{
top : 0px;
}
JS:
$('.bar').on('click',function(){
$(this).toggleClass('selected');
});