I am try to get a menu to slide to the left on click of a button and then slide back to its original position on click of the same button. I am using toggle, but I can not seem to get it to work. The button would also slide to the right so it is visible when the menu is not. Without the toggle method the menu and button slide correctly, but do not slide back.
JQuery:
$("#menu-button").click(function() {
$("#menu-button").toggle(function() {
$("#menu").animate({
"left": "-=300px"
}, "slow");
$("#menu-button").animate({
"right": "-=60px"
}, "slow");
},
function() {
$("#menu").animate({
"left": "+=300px"
}, "slow");
$("#menu-button").animate({
"right": "-=60px"
}, "slow");
}
});
});
HTML:
<div id="menu">
<button id="menu-button">press</button>
</div>
CSS:
#menu {
width: 300px;
height: 500px;
background-color: black;
position: absolute;
left: 0;
}
#menu-button {
width: 48px;
height: 48px;
background-color: red;
float: right;
margin: 10px;
text-align: center;
cursor:pointer;
position: relative;
}
Instead of toggle, I find it easiest, possibly years later, to review code that is explicit. Personal preference is to use a var to store current div state. Personal preference . . . but it works.
var menuOut = true;
$("#menu-button").click(function() {
if (menuOut){
menuOut = false;
$("#menu").animate({
"left": "-300px"
}, "slow");
$("#menu-button").animate({
"left": "60px"
}, "slow");
}else{
menuOut = true;
$("#menu").animate({
"left": 0
}, "slow");
$("#menu-button").animate({
"left": 0
}, "slow");
}
});
#menu {
position: absolute;
left: 0;
width: 300px;
height: 500px;
background-color: darkcyan;
}
#menu-button {
position: relative;
width: 48px;
height: 48px;
background-color: red;
float: right;
margin: 10px;
text-align: center;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="menu">
<button id="menu-button">press</button>
</div>
Related
I want to hide the hidden class div. When user will click on the outside of the div hidden
div should be slide-out.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="hidden">Here I am !</div>
<div class="left">Left panel</div>
<div class="right">Right panel</div>
<div class="clear"></div>
Show/hide Slide Panel
</body>
</html>
CSS
.left,
.hidden {
float: left;
height: 350px;
}
.left {
width: 50%;
background: #fff;
z-index: 1;
}
.hidden {
width: 25%;
z-index: 2;
position: absolute;
left: -1000px;
background: #f90;
color: #000;
}
.right {
width: 50%;
float: right;
height: 350px;
background: #000;
color: #fff;
}
.clear {
clear: both;
}
JS
$(document).ready(function () {
$('#slide').click(function () {
var hidden = $('.hidden');
if (hidden.hasClass('visible')) {
hidden.animate({
"left": "-1000px"
}, "slow").removeClass('visible');
} else {
hidden.animate({
"left": "0px"
}, "slow").addClass('visible');
}
});
});
Thanks in advance!
You can you this code. And you can define which elements of your page could hide your panel. I choose left, right and clear classes here:
$(document).ready(function () {
$('#slide').click(function () {
hide_el ();
});
$('.left, .right, .clear').click(()=>{
var hidden = $('.hidden');
if (hidden.hasClass('visible')) {
hidden.animate({
"left": "-1000px"
}, "slow").removeClass('visible');
}
});
});
function hide_el (){
var hidden = $('.hidden');
if (hidden.hasClass('visible')) {
hidden.animate({
"left": "-1000px"
}, "slow").removeClass('visible');
} else {
hidden.animate({
"left": "0px"
}, "slow").addClass('visible');
}
}
.left,
.hidden {
float: left;
height: 350px;
}
.left {
width: 50%;
background: #fff;
z-index: 1;
}
.hidden {
width: 25%;
z-index: 2;
position: absolute;
left: -1000px;
background: #f90;
color: #000;
}
.right {
width: 50%;
float: right;
height: 350px;
background: #000;
color: #fff;
}
.clear {
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="hidden">Here I am !</div>
<div class="left">Left panel</div>
<div class="right">Right panel</div>
<div class="clear"></div>
Show/hide Slide Panel
</body>
</html>
If you need body click then use this code:
$(document).ready(function () {
$('#slide').click(function () {
hide_el ();
});
});
function body_click(){
setTimeout(()=>{
var hidden = $('.hidden');
$('body').click( function(event) {
if( $(event.target).closest(hidden).length === 0 ) {
if (hidden.hasClass('visible')) {
hidden.animate({
"left": "-1000px"
}, "slow").removeClass('visible');
};
}
});
}, 1000);
}
function hide_el (){
$('body').unbind('click');
var hidden = $('.hidden');
if (hidden.hasClass('visible')) {
hidden.animate({
"left": "-1000px"
}, "slow").removeClass('visible');
} else {
hidden.animate({
"left": "0px"
}, "slow").addClass('visible');
body_click();
}
}
body {
height: 300px;
}
.left,
.hidden {
float: left;
height: 350px;
}
.left {
width: 50%;
background: #fff;
z-index: 1;
}
.hidden {
width: 25%;
z-index: 2;
position: absolute;
left: -1000px;
background: #f90;
color: #000;
}
.right {
width: 50%;
float: right;
height: 350px;
background: #000;
color: #fff;
}
.clear {
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="hidden">Here I am !</div>
<div class="left">Left panel</div>
<div class="right">Right panel</div>
<div class="clear"></div>
Show/hide Slide Panel
</body>
</html>
The following code checks if you're clicking inside the target element of a descendent of that element. If not the desired code will run. I didn't add in the animation bits, that's all you. Here's the fiddle https://jsfiddle.net/jhe36dmb/1/
$(document).mouseup(function (e)
{
var container = $('.hidden');
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$('.hidden').css('left', '0');
}
});
I'm trying to do an animation on page scroll where selected element will animate from left to right on scroll down and if back to top then animate the selected element from right to left (default position), here's what I tried
$(document).ready(function() {
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (wS <= 10) {
$("#test-box").animate({
'left': 100
}, 500);
}
if (wS > 11) {
$("#test-box").animate({
'left': $('#main-container').width() - 100
}, 500);
}
});
});
#main-container {
width: 100%;
overflow: auto;
height: 500px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100;
top: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>
As you can see, on scroll down, the test box moves as I instruct but when scroll up, it does not go to the left as default, any ideas, help please?
You can add a global variable to control the animation. See the working snippet below please, where I've commented parts of the code that I added:
$(document).ready(function() {
var animated = false; //added variable to control the animation
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (animated && wS <= 10) {
$("#test-box").animate({
'left': 100
}, 500);
animated = false; //animation ended
}
if (!animated && wS > 11) {
$("#test-box").animate({
'left': $('#main-container').width() - 100
}, 500);
animated = true; //it was animated
}
});
});
#main-container {
width: 100%;
overflow: auto;
height: 500px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100px;
top: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>
This should work, it also uses css for the animation.
$(document).ready(function() {
var box = document.querySelector('#test-box');
var stateClass = '-right';
window.addEventListener('scroll', function(event) {
box.classList.toggle(stateClass, document.body.scrollTop > 10);
});
});
#main-container {
width: 100%;
overflow: auto;
height: 2000px;
}
#test-box {
background: red;
color: #ffffff;
padding: 15px;
font-size: 18px;
position: fixed;
left: 100px;
top: 10;
transition: .5s linear;
}
#test-box.-right {
left: 100%;
transform: translateX(-100%) translateX(-100px)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
<div id="test-box">test</div>
</div>
So I keep trying to animate these circles to expand in compress, but everytime I try to get them to do it at the same time it fails. Here is what I have.
$(document).ready(function() {
function myAnimate1(x) {
$(x)
.animate({
top: "150px",
left: "150px",
height: "0px",
width: "0px"
})
.animate({
top: "100px",
left: "100px",
height: "100px",
width: "100px"
}),
myAnimate1(x);
}
function myAnimate2(x) {
$(x)
.animate({
top: "150px",
left: "150px",
height: "0px",
width: "0px"
})
.animate({
top: "0px",
left: "0px",
height: "300px",
width: "300px"
}),
myAnimate2(x);
}
myAnimate1('.circle1');
myAnimate2('.circle2');
});
.circle1 {
position: absolute;
top: 150px;
left: 150px;
height: 0;
width: 0;
background: transparent;
border: 4px black solid;
border-radius: 100000000px;
overflow: hidden;
display: inline-block;
}
.circle2 {
position: absolute;
top: 150px;
left: 150px;
height: 0;
width: 0;
background: transparent;
border: 4px black solid;
border-radius: 100000000px;
overflow: hidden;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle1"></div>
<div class="circle2"></div>
I want the element that isn't moving to expand at the same time as the other div.
Help me pl0x
You need to recall the animate in the callback function otherwise you are just calling the animate instantly again before the previous animation has finished:
$(document).ready(function() {
function myAnimate1(x) {
$(x)
.animate({
top: "150px",
left: "150px",
height: "0px",
width: "0px"
})
.animate({
top: "100px",
left: "100px",
height: "100px",
width: "100px"
}, 'slow', function() {
// move this into callback function of last animation
myAnimate1(x);
})
}
function myAnimate2(x) {
$(x)
.animate({
top: "150px",
left: "150px",
height: "0px",
width: "0px"
})
.animate({
top: "0px",
left: "0px",
height: "300px",
width: "300px"
}, 'slow', function() {
// move this into callback function of last animation
myAnimate2(x);
});
}
myAnimate1('.circle1');
myAnimate2('.circle2');
});
.circle1 {
position: absolute;
top: 150px;
left: 150px;
height: 0;
width: 0;
background: transparent;
border: 4px black solid;
border-radius: 50%;
overflow: hidden;
display: inline-block;
}
.circle2 {
position: absolute;
top: 150px;
left: 150px;
height: 0;
width: 0;
background: transparent;
border: 4px black solid;
border-radius: 50%;
overflow: hidden;
display: inline-block;
}
body {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle1"></div>
<div class="circle2"></div>
Example fiddle
This is the basic, standard code with easing.
var anim_data1 = { top : "100px", left : "100px" } // anim 1
var anim_data2 = { top : "150px", left : "150px" } // anim 2
// Animate both elements, at the same time:
$(".circle1").stop().animate( anim_data1, 300, "easeOutBounce" );
$(".circle2").stop().animate( anim_data2, 300, "easeOutBounce" );
There are potential problems with your code:
Don't wrap your animate method in additional function scope.
Solution: move your functions out of $(document).ready({...}) scope.
If none of the above solved the issue, something else, unrelated to animate method is not set up properly in your project.
You can also use a call-back of the previous animate method, as long as the running time of the animation is set to 0. But this creates a problem:
$(ID1).animate( anim_data1, 0, function()
{
$(ID2).animate( anim_data2, 300 );
});
This will roughly fire both animations at the same time.
As you can see, this doesn't make much sense. Because both animations should at least run for a period of time (like 300-1000ms). So it's not really going to "animate" both at the same time -- only the second animation will run. The first one will be much like $(ID1).css() method was applied to it.
I tried to put together following codes but doesn't work. when i down scroll, page up button appears and when i click it, scroll is to be top of page. When i up the scroll to top of page, page down button appears and when i click it, it does same action with page up scroll.
var amountScrolledTop = 200;
var amountScrolledDown = 50;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolledTop ) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
if ( $(window).scrollTop() < amountScrolledDown ) {
$('a.down1').fadeIn('slow');
} else {
$('a.down1').fadeOut('slow');
}
});
$('a.back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 'slow');
return false;
});
$('a.down1').click(function() {
var objDiv = document.getElementById("mid");
objDiv.scrollTop = objDiv.scrollHeight;
});
.down1{
width: 60px;
height: 60px;
text-indent: -9999px;
position: fixed;
z-index: 999;
right: 60px;
top: 80px;
background: url("../img/simple_icons/downArrow.png") no-repeat center 43%;
}
.back-to-top{
display: none;
width: 60px;
height: 60px;
text-indent: -9999px;
position: fixed;
z-index: 999;
right: 20px;
bottom: 20px;
background: url("../img/simple_icons/upArrow.png") no-repeat center 43%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
Down to
Back to Top
.
.
.
<div class="mid"></div>
</body>
Page down button always up the scroll to top of page. Even i erase all the javascript code.
I think this is what you were looking for, I put some comments on the code to describe the modifications I made.
var amountScrolledTop = 200;
var amountScrolledDown = 50;
$(window).scroll(function() {
if ( $(window).scrollTop() > amountScrolledTop ) {
$('a.back-to-top').fadeIn('slow');
} else {
$('a.back-to-top').fadeOut('slow');
}
if ( $(window).scrollTop() < amountScrolledDown ) {
$('a.down1').fadeIn('slow');
} else {
$('a.down1').fadeOut('slow');
}
});
$('a.back-to-top').click(function() {
$('html, body').animate({
scrollTop: 0
}, 'slow');
return false;
});
$('a.down1').click(function(e) {
//you have to prevent the default action of the link (the default going to the top because of href="#" even if there is no javascript)
e.preventDefault();
//objDiv used to be "null" because it was defined by class not id in html
var objDiv = document.getElementById("mid");
$('html, body').animate({
scrollTop: objDiv.scrollHeight
}, 'slow');
});
.down1{
width: 60px;
height: 60px;
position: fixed;
z-index: 999;
right: 60px;
top: 80px;
background: url("../img/simple_icons/downArrow.png") no-repeat center 43%;
}
.back-to-top{
display: none;
width: 60px;
height: 60px;
position: fixed;
z-index: 999;
right: 20px;
bottom: 20px;
background: url("../img/simple_icons/upArrow.png") no-repeat center 43%;
}
#mid {
height: 2000px;
background-color: #bbb;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Down to
Back to Top
<!-- it was class="mid" -->
<div id="mid"></div>
I have this infobox that will slide to show on hover on a arrow connected to that infobox. See the jsfiddle I've linked further down for more insight.
The thing I'm struggling with is that it's sort of laggy. It jumps back and forth really fast as it likes and it bothers me a lot. I've done some research and found out that the .stop(true, false) is the thing messing it up, but that you can't really go without it either. Haven't found any smooth solution yet though...
I would like it, if possible, to...
...when hovered, fully animate the animation even though the mouse leaves.
...animate when #infoboxArrow is hovered and then animate back when the mouse leaves its parent #infocontainer.
$('#infoboxArrow').hover(function() {
$('#infocontainer')
.stop(true, false)
.animate({
right: 250
}, 600);
}, function() {
$('#infocontainer')
.stop(true, false)
.animate({
right: 0
}, 600);
});
#infocontainer{
position:fixed;
background-color: blue;
top: 0em;
right: 0em;
}
#infoboxArrow {
display: inline-block;
background-color: pink;
margin-bottom: 10.1325em;
margin-top: 10.1325em;
height: 7.735em;
}
#infoboxDiv{
display: inline-block;
background-color: yellow;
width: 400px;
height: 28em;
position: absolute;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="infocontainer" class="slideOutTab">
<div id ="infoboxArrow" class="slideOutTab"><img src="http://i61.tinypic.com/qmx8ns.png"/></div>
<div id="infoboxDiv" class="slideOutTab"></div>
</div>
Try listening to mouseenter and mouseleave events instead of hover:
var $infocontainer = $('#infocontainer');
$('#infoboxArrow').on('mouseenter', function() {
$infocontainer
.stop(true, false)
.animate({
right: 250
}, 600);
});
$infocontainer.on('mouseleave', function() {
$infocontainer
.stop(true, false)
.animate({
right: 0
}, 600);
});
var $infocontainer = $('#infocontainer');
$('#infoboxArrow').on('mouseenter', function() {
$infocontainer
.stop(true, false)
.animate({
right: 250
}, 600);
});
$infocontainer.on('mouseleave', function() {
$infocontainer
.stop(true, false)
.animate({
right: 0
}, 600);
});
#infocontainer{
position:fixed;
background-color: blue;
top: 0em;
right: 0em;
}
#infoboxArrow {
display: inline-block;
background-color: pink;
margin-bottom: 10.1325em;
margin-top: 10.1325em;
height: 7.735em;
}
#infoboxDiv{
display: inline-block;
background-color: yellow;
width: 400px;
height: 28em;
position: absolute;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="infocontainer" class="slideOutTab">
<div id ="infoboxArrow" class="slideOutTab"><img src="http://i61.tinypic.com/qmx8ns.png"/></div>
<div id="infoboxDiv" class="slideOutTab"></div>
</div>
Also note you don't need the image. And you are mixing em units with px, so your layout could break if the font size changes. Consider this code:
var $infocontainer = $('#infocontainer');
$('#infoboxArrow').on('mouseenter', function() {
$infocontainer
.stop(true, false)
.animate({
right: 250
}, 600);
});
$infocontainer.on('mouseleave', function() {
$infocontainer
.stop(true, false)
.animate({
right: 0
}, 600);
});
#infocontainer{
position: fixed;
height: 28em;
background-color: blue;
top: 0em;
right: 0em;
}
#infoboxArrow {
display: inline-block;
background-color: pink;
position: relative;
top: 50%;
margin-top: -59px;
border: 59px solid #FFC0CB;
border-right: 100px solid #000000;
border-left: none;
}
#infoboxDiv{
display: inline-block;
background-color: yellow;
width: 400px;
height: 100%;
position: absolute;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="infocontainer" class="slideOutTab">
<div id="infoboxArrow" class="slideOutTab"></div>
<div id="infoboxDiv" class="slideOutTab"></div>
</div>