We Keep Coding

Fading in a div while animating from the left/right/top/bottom

I am trying to make a transition where a div set to "display:none" fades in and moves to the center of the page from either the left/right/top/bottom.
How can I get it to simultaneously fade in and animate({left: })?
My current code first fades it in and then animates it.
$("#button" ).click(function(){
$("#text").fadeIn(1000, function(){
$("#text" ).animate({ "left": "+=50%" }, "slow" )
})
})
Current JSFiddle

Use the notation like in my snippet below to animate both parameters at the same time. Note: I used opacity for the fading animation. (And use position: absolute for the animated element)
$(document).ready(function() {
$("#button").click(function() {
$("#text").animate({
left: '+=50%',
opacity: '1'
}, 1000);
})
})
#button {
display: inline-block;
border-radius: 5px 5px 5px 5px;
border: 2px solid deepskyblue;
color: white;
background-color: black;
padding: 2px;
margin: 2px;
}
#text {
color: deepskyblue;
font-size: 2vw;
position: absolute;
display: inline-block;
top: 60px;
opacity: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">
Move
</div>
<div id="text">
Hello there
</div>

position of the div with id text should be absolute. Here is your code
$(document).ready(function() {
$("#button").click(function() {
$("#text").fadeIn(1000, function() {
$("#text").animate({
"left": "+=50%"
}, "slow")
})
})
})
#button {
display: inline-block;
border-radius: 5px 5px 5px 5px;
border: 2px solid deepskyblue;
color: white;
background-color: black;
padding: 2px;
margin: 2px;
}
#text {
color: deepskyblue;
fontsize: 2vw;
position: absolute;
display: inline-block;
top: 60px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">
Move
</div>
<div id="text">
Hello there
</div>

I'm struggling to get this jquery slide down and up to work

The div I'm animating in jquery is supposed to slide out to expand the width. I've gotten the width animation to work but after adding the slideDown and up code nothing works, the way it should work is:
Enquiries should be clicked and it expands and after it expands the. For slides down and when its clicked again, first the fork slides up and then the ENQUIRIES- shown goes back to its original width.
I'm not sure where my codes gone wrong as I'm new to jquery and java script. THANK YOU FOR ANY HELP!
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
$(this).animate({
width: "950px",
borderRadius: "0px"
}, 1000);
setTimeout(function() {
$('#enquiry-form').slideDown('slow');
}, 1000);
function() {
if ($('#enquiry-form').is("visible") {
$('#enquiry-form').slideUp("slow");
else($('#enquiry-form').is("hidden") {
$('#enquiry-form ').slideDown("slow");
});
});
};
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
</div>
</div>

I changed i few things in your js code, i used a class to define the condition when to slideup or down
See the result:
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
var current = $(this)
if ($('#enquiry-shown').hasClass("active")) {
$('#enquiry-form').slideUp('slow', function() {
current.animate({
width: "210px",
borderRadius: "50px"
}, 1000);
});
$('#enquiry-shown').removeClass("active");
} else {
current.animate({
width: "100%",
borderRadius: "0px"
}, 1000, function() {
$('#enquiry-form').slideDown('slow');
});
$('#enquiry-shown').addClass("active");
}
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 0px 20px 0 0;
display: inline-block;
transition: all 1s;
transform: rotate(-90deg);
}
#enquiry-form {
width: 100%;
height: 100px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
#enquiry-shown.active img {
transform: rotate(0deg);
padding-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
This is the enquiry form
</div>
</div>

I don't know if u want to achieve this effect, but try this and give me feedback:
$('#enquiry-shown').click(function() {
if($('#enquiry-form').is(':visible')){
$('#enquiry-form').slideUp('slow', function(){
$('#enquiry-shown').animate({
width: "210px",
borderRadius: "50px"
}, 1000);
});
}
else if($('#enquiry-form').is(':hidden')){
$('#enquiry-shown').animate({
width: "950px",
borderRadius: "0px"
}, 1000, function(){
$('#enquiry-form').slideDown('slow');
});
}
});

You have a lot of syntax errors such as incorrectly matched brackets, missing parenthesis, missing function name, and using else when you should use else if.
When you fix all of them it looks like your click function already has some of your intended functionality.
Next I'd suggest removing the setTimeout in favor of jQuery's animate end handler, which you use by attaching a function to most animations.
Lastly you should refactor your code a little. I don't think is('visible') does what you think it does, but luckily there's a slideToggle method that does do what you want pretty easily.
Your click handler then needs to consider cases when the menu is already open and when it's not open and then act accordingly. For that you might consider using toggleClass and then checking which class it is with hasClass before deciding what animation to perform.
//-----------ENQUIRY-FORM----------
$('#enquiry-shown').click(function() {
if(!$(this).hasClass('closed')){ // if the form is not closed
$(this).animate({ // animate the form to open state
width: "950px",
borderRadius: "0px",
}, 1000, ()=>{
$("#enquiry-form").slideToggle()
});
}else{ // if the form is closed animate in reverse order
$("#enquiry-form").slideToggle(
()=>{
$(this).animate({
width : "210px",
borderRadius : "50px"
}, 1000);
}
)
}
$(this).toggleClass('closed'); // toggle the class
});
/*--------ENQUIRIES---------*/
#enquiry-container {
text-align: center;
margin-bottom: 25px;
}
#enquiry-shown {
background-color: white;
padding: 10px 0;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);
width: 210px;
border: solid 1px #d8d8d8;
border-radius: 50px;
margin: 0 auto;
}
#enquiry-name {
font-family: "calibri light";
font-size: 30px;
text-align: center;
margin: 0;
display: inline;
padding: 0 0 0 10px;
}
#enq-arrowdown {
width: 25px;
height: 16px;
float: right;
padding: 10px 19px 0 0;
display: inline-block;
}
#enquiry-form {
width: 950px;
height: 400px;
background-color: white;
margin: 0 auto;
display: none;
border-bottom: solid 1px #d8d8d8;
border-right: solid 1px #d8d8d8;
border-left: solid 1px #d8d8d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="enquiry-container">
<div id="enquiry-shown">
<h2 id="enquiry-name">Enquiries</h2>
<img id="enq-arrowdown" src="https://www.optimaltravel.ca/images/arrow.png">
</div>
<div id="enquiry-form">
<div> Hello I am a form </div>
</div>
</div>

Multiple elements on mouseover event instead of single element

JSFiddle: http://jsfiddle.net/357nf0ht/4/
If you are hovering one of the .item, a menu will appear. Hovering the "X" will show you a button.
I expect, that hovering the button will create a single temporary item, which belongs to the first selected .item. But instead of that, there are multiple temporary items, if you have hovered more then one .item at the beginning. It seems, that this remembers also the events in the past.
I don't understand this behavior.
$(document).on('mouseenter', '.item', function (event) {
var item = $(this);
$('#item_add').css({
"left": '5.5em',
"top": item.offset().top - 15
}).show();
$('#item_add').hover(function () {
var menue = $(this);
menue.animate({
"width": '7em',
"left": '0.5em'
}, 200, function () {
$(this).find(".body").stop().slideDown(200);
});
}, function () {
var menue = $(this);
menue.find(".body").stop().slideUp(200, function () {
menue.animate({
"width": '2em',
"left": '5.5em'
}, 200);
});
});
$('#item_element_new').hover(function () {
item.after('<div id="item_new"></div>');
}, function () {
$('#item_new').remove();
});
});

This is happening because every time you trigger mouseenter on .item you attach a new event to button.
Quick Solution: You have to remove previous events before attaching a new one, you can do this with .unbind(), here is a working example
$('#item_element_new').unbind();
$('#item_element_new').hover(function () {
$(document).on('mouseenter', '.item', function (event) {
var item = $(this);
$('#item_add').css({
"left": '5.5em',
"top": item.offset().top - 15
}).show();
$('#item_add').hover(function () {
var menue = $(this);
menue.animate({
"width": '7em',
"left": '0.5em'
}, 200, function () {
$(this).find(".body").stop().slideDown(200);
});
}, function () {
var menue = $(this);
menue.find(".body").stop().slideUp(200, function () {
menue.animate({
"width": '2em',
"left": '5.5em'
}, 200);
});
});
$('#item_element_new').unbind();
$('#item_element_new').hover(function () {
item.after('<div id="item_new"></div>');
}, function () {
$('#item_new').remove();
});
});
.item {
border: 1px solid #e2e2e2;
margin: 6px;
padding: 0px 10px 0px 10px;
position: relative;
height: 40px;
}
.wrap {
margin-left: 8em;
}
#item_new {
border: 1px dashed #C0C0C0 !important;
background: none repeat scroll 0% 0% #F7F7F7;
display: block;
height: 2.2em;
margin: 6px;
padding: 0px 10px;
position: relative;
}
#item_add {
display: none;
position: absolute;
width: 2em;
border: 1px solid #ddd;
background-color: #f7f7f7;
color: #aaa;
padding: 0px 6px;
}
#item_add .body {
display: none;
}
#item_add .arrow {
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
top: 5px;
right: -7px;
position: absolute;
}
#item_add button {
background: none repeat scroll 0px center #fff;
padding: 0.2em 2em;
margin: 3px .2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="item_add">
<header>X</header>
<div class="body">
<button id="item_element_new">Example</button>
</div>
<div class="arrow"></div>
</div>
Soulution 2: As #Regent pointed out your code have some problems, you can solve a part of them:
Moving event binding outside mouseenter event handler
Caching jQuery objects
Not using .unbind() anymore
var $itemAdd = $('#item_add');
var $menuBody = $itemAdd.find(".body")
var $item = $('.item');
$itemAdd.hover(function () {
$itemAdd.animate({
"width": '7em',
"left": '0.5em'
}, 200, function () {
$menuBody.stop().slideDown(200);
});
}, function () {
$menuBody.stop().slideUp(200, function () {
$itemAdd.animate({
"width": '2em',
"left": '5.5em'
}, 200);
});
});
$('#item_element_new').hover(function () {
$('.item-hovered').after('<div id="item_new"></div>');
}, function () {
$('#item_new').remove();
});
$item.mouseenter(function (event) {
var $currentItem = $(this);
$currentItem.addClass('item-hovered');
$currentItem.siblings().removeClass('item-hovered');
$itemAdd.css({
"left": '5.5em',
"top": $currentItem.offset().top - 15
}).show();
});
.item {
border: 1px solid #e2e2e2;
margin: 6px;
padding: 0px 10px 0px 10px;
position: relative;
height: 40px;
}
.wrap {
margin-left: 8em;
}
#item_new {
border: 1px dashed #C0C0C0 !important;
background: none repeat scroll 0% 0% #F7F7F7;
display: block;
height: 2.2em;
margin: 6px;
padding: 0px 10px;
position: relative;
}
#item_add {
display: none;
position: absolute;
width: 2em;
border: 1px solid #ddd;
background-color: #f7f7f7;
color: #aaa;
padding: 0px 6px;
}
#item_add .body {
display: none;
}
#item_add .arrow {
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
top: 5px;
right: -7px;
position: absolute;
}
#item_add button {
background: none repeat scroll 0px center #fff;
padding: 0.2em 2em;
margin: 3px .2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="item_add">
<header>X</header>
<div class="body">
<button id="item_element_new">Example</button>
</div>
<div class="arrow"></div>
</div>

The easiest fix, reason is what #erik-philips said:
$(document).on('mouseenter', '.item', function (event) {
var item = $(this);
$('#item_add').css({
"left": '5.5em',
"top": item.offset().top - 15
}).show();
$('#item_element_new').data('hovering_item', item);
});
$('#item_add').hover(function () {
var menue = $(this);
menue.animate({
"width": '7em',
"left": '0.5em'
}, 200, function () {
menue.find(".body").stop().slideDown(200);
});
}, function () {
var menue = $(this);
menue.find(".body").stop().slideUp(200, function () {
menue.animate({
"width": '2em',
"left": '5.5em'
}, 200);
});
});
$('#item_element_new').hover(function () {
var item = $('#item_element_new').data('hovering_item');
item.after('<div id="item_new"></div>');
}, function () {
var item = $('#item_element_new').data('hovering_item');
$('#item_new').remove();
});
.item {
border: 1px solid #e2e2e2;
margin: 6px;
padding: 0px 10px 0px 10px;
position: relative;
height: 40px;
}
.wrap {
margin-left: 8em;
}
#item_new {
border: 1px dashed #C0C0C0 !important;
background: none repeat scroll 0% 0% #F7F7F7;
display: block;
height: 2.2em;
margin: 6px;
padding: 0px 10px;
position: relative;
}
#item_add {
display: none;
position: absolute;
width: 2em;
border: 1px solid #ddd;
background-color: #f7f7f7;
color: #aaa;
padding: 0px 6px;
}
#item_add .body {
display: none;
}
#item_add .arrow {
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
top: 5px;
right: -7px;
position: absolute;
}
#item_add button {
background: none repeat scroll 0px center #fff;
padding: 0.2em 2em;
margin: 3px .2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="item_add">
<header>X</header>
<div class="body">
<button id="item_element_new">Example</button>
</div>
<div class="arrow"></div>
</div>

div show in jQuery on button click

Have a left fixed pane in my page & a variable right pane which is composed of several changing divs.
I want on the button click on the left pane. The required right pane div show show & other divs should be hidden.
http://jsfiddle.net/shivang/guvr4/2/
This is what I've achieved so far. But its not working can anyone help me with this.
Html
<div id="container">
<!-- Left Layout div starts -->
<div id="left_layout">
<table>
<b></b>
<br><br>
<tr></tr><br>
<br></br>
<tr><button name="1">1</button></tr>
<br></br>
<tr><button name="2">2</button></tr>
<br></br>
<tr><button name="3">3</button></tr>
<br></br>
<tr><button name="4">4</button></tr>
<br></br>
<tr><button name="5">5</button></tr>
<br></br>
<tr><button name="6">6</button></tr>
<br></br>
<tr><button name="7">7</button></tr>
</table>
</div><!-- Left Layout Div ends -->
<div id="center_layout">
<div id="right_layout">Right Layout</div>
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
<div id="5">5</div>
<div id="6">6</div>
<div id="7">7</div>
</div><!-- Center Layout div ends -->
</div><!-- End of Container div -->
CSS
html, body {
background: #FFFFFF;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: auto; /* when page gets too small for container min-width/height */
}
#container {
background: #FFFFFF;
min-height: 670px;
min-width: 600px;
position: absolute;
top: 50px; /* margins in pixels */
bottom: 50px; /* could also use a percent */
left: 50px;
right: 50px;
}
.pane {
display: none; /* will appear when layout inits */
}
#left_layout{
background: #FFFFFF;
position: absolute;
top: 30px; /* margins in pixels */
bottom: 30px; /* could also use a percent */
left: 20px;
/* right: 10px; */
min-height: 18px;
min-width: 250px;
/* box-shadow: 10px 10px 5px #888888;
border: 1px; */
/* -moz-border-radius: 8px;
border-radius: 8px; */
-webkit-box-shadow: 0 0 5px 2px #F8F8F8;
-moz-box-shadow: 0 0 5px 2px #F8F8F8;
box-shadow: 0 0 5px 2px #F8F8F8;
background: #ffffff;
border: 1px solid #ababab;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding: 5px;
}
#center_layout{}
#center_layout div{
display: none;
background: #F8F8F8;
position: absolute;
top: 30px; /* margins in pixels */
bottom: 30px; /* could also use a percent */
left: 287px;
right: 30px;
min-height: 18px;
min-width: 865px;
/* box-shadow: 10px 10px 5px #888888; */
/* -moz-border-radius: 8px;
border-radius: 8px; */
-webkit-box-shadow: 0 0 5px 2px #F8F8F8;
-moz-box-shadow: 0 0 5px 2px #F8F8F8;
box-shadow: 0 0 5px 2px #F8F8F8;
background: #ffffff;
border: 1px solid #ababab;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding: 5px;
}
JavaScript
$(document).on('click', function() {
$('#center_layout div').hide();
var target = '#' + $(this).html();
$(target).show('slow');
});

Try:
$(document).on('click','button', function() {
$('#center_layout div').hide();
var target = '#' + $(this).text();
$(target).show('slow');
});
Updated fiddle here.

Maybe you should try this:
$('button').on('click', function() {
$('#center_layout div').hide();
$('#' + $(this).attr('name')).show('slow');
});
Fiddle: http://jsfiddle.net/guvr4/4/
BTW the id attribute should not be just a numeric value.

If you want to create an event with the buttons only, try this:
$('button').on('click', function() {
$('#center_layout div').hide();
var target = '#' + $(this).html();
$(target).show('slow');
});
The updated fiddle is here, I hope this is what you are looking for.

I would put the reference ID in a data-show="" attribute on the button,
Here's button HTML
<tr><button name="3" data-show="3">3</button></tr>
Here's the js
$(document).on('click', function() {
$('#center_layout div').hide();
var target = '#' + $(this).data('show');
$(target).show('slow');
});

Sticky footer animation with jquery and setTimeout

I try to make animation for sticky footer, indeed, it is a horizontal ribbon using jquery and setTimeout. I just want to animate that ribbon's background color.
The HTML
<div class="ribbon">
<div class="closeR" style="display:inline-block; width:2.9em; height:1.8em; float:right; margin-right:0.7em; cursor: pointer;" title="إغلاق">X</div> كل عام وأنتم بخير... رمضان الطاعات
</div>
The CSS
.ribbon {
z-index: 10;
border: 1px solid #faa;
background-color: #a00;
overflow: hidden;
width:100%;
/*bottom bar*/
position:fixed;
bottom: 0;
left:0;
right:0;
/* shadow */
-moz-box-shadow: -1px -2px 6px #525252;
-webkit-box-shadow: -1px -2px 6px #525252;
}
.ribbon a {
color: #fff;
display: inline-block;
font: bold 81.25%'sans-serif;
margin: 0.05em 0 0.075em 0;
padding: 0.5em 3.5em;
text-align: center;
text-decoration: none;
/* shadow */
text-shadow: 0 0 0.5em #444;
}
And Finally the Javascript:
$(document).ready(function () {
if ($.cookie('ribbonClose')) {
$('.ribbon').css("display", "none");
} else {
state = true;
setTimeout(function () {
if (state) {
$(".ribbon").animate({
backgroundColor: "#ff0"
}, 100);
state = false;
} else {
$(".ribbon").animate({
backgroundColor: "#050"
}, 100);
state = true;
}
}, 50);
}
$('.closeR').click(function () {
$('.ribbon').fadeOut("slow");
$.cookie('ribbonClose', true, {
expires: 1,
path: '/'
});
})
})
The animation does not work! It seems that setTimeout does not able to recall the defined function every 50 millisecond, it just call the function once! What is the mistake here?
There is a live demo on JSFiddle