I have one div hidden out of page and one part is visible like:
div{
left: -100px;
width: 150px;
height: 50px;
}
I used jquery to show whole div:
$("div").hover(function(){
$("div").animate({left: '0px'});
},function(){
$("div").animate({left: '-100px'});
});
When I hover over the div and quickly unhover over it multiple times, It seems to play the animation the same amount of times I do this. How can I make it stop mid-animation if I stop hovering over the div, and how can I make the animation start only after I have hovered over it for a certain amount of time.
You can use .stop() to stop the previous animation.
$("div").hover(function() {
$("div").stop().animate({
left: '0px'
}, "slow");
}, function() {
$("div").stop().animate({
left: '-100px'
});
}, "slow");
div {
left: -100px;
width: 150px;
height: 50px;
background-color: blue;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
If you want it to wait until you've been hovering for a bit before the animation starts, you can use setTimeout, and you can cancel the timeout in the unhover function.
var hoverTimer;
$("div").hover(function() {
hoverTimer = setTimeout(function() {
$("div").stop().animate({
left: '0px'
}, "slow");
}, 1000);
}, function() {
clearTimeout(hoverTimer);
$("div").stop().animate({
left: '-100px'
});
}, "slow");
div {
left: -100px;
width: 150px;
height: 50px;
background-color: blue;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
Related
I have a CSS class that has left-margin: 150px and I just want to function it in an animated way.
ToggleClass in jQuery works but without any animation.
$(this).toggleClass("active", 1000, "easeInOutQuad");
I managed to do it animated using addClass and removeClass. But I am wondering if there is any easier way to do it. it takes 10 lines of code while there should be something much more efficient.
Any ideas?
$(".box").on('click tap', function() {
if($(this).hasClass('active')){
$(this).animate({
marginLeft: "-=150px",
}, 500, function() {
$(this).removeClass('active');
});
}else{
$(this).animate({
marginLeft: "+=150px",
}, 500, function() {
$(this).addClass('active');
});
}
});
// $(this).toggleClass("active", 1000, "easeInOutQuad");
.box{
width: 100px;
height: 100px;
background-color: red;
}
.active{
margin-left: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"> BOX </div>
I'd use CSS transition to do it. Add transition: margin-left 0.5s; (or similar) to your .box style rules:
$(".box").on('click tap', function() {
$(this).toggleClass('active');
});
.box {
width: 100px;
height: 100px;
background-color: red;
transition: margin-left 0.5s; /* <== */
}
.active {
margin-left: 150px;
}
<div class="box"> BOX </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I am wondering if it's possible to repeat the same properties in the jQuery .aniamte() function. For example, if I have a green square and I want to move it to the right, then down and again right. How can I do it? I tried writing the first .animate() function again, but it didn't work.
$(document).ready(function(){
$("div").animate({left: "100px"}, "slow");
$("div").animate({top: "100px"}, "slow");
$("div").animate({left: "100px"}, "slow");
});
div {
height: 60px;
width: 60px;
background-color: green;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
The easiest way is to use +=.
$(document).ready(function(){
$("div").animate({left: "+=100px"}, "slow");
$("div").animate({top: "100px"}, "slow");
$("div").animate({left: "+=100px"}, "slow");
});
div {
height: 60px;
width: 60px;
background-color: green;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
Your square isn't moving further because it is already left: 100px
If you would like your square to move further, you need to add more to x/y!
Forgive how rudimentary the loop is but:
var x = 100;
var y = 100;
for(var x=100; x<500; x+=100){
$('div').animate({left:x+"px"}, 'slow')
.animate({top:y+"px"}, 'slow');
y+=100;
}
jsfiddle
Just wrap it in a recursive function (jsfiddle):
function anim(){
$("div").animate({left: "100px"}, "slow")
.animate({top: "100px"}, "slow")
.animate({left: 0}, "slow")
.animate({top: 0 }, "slow", function(){ anim(); });
}
anim();
div {
height: 60px;
width: 60px;
background-color: green;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
The div has already left: "100px" after the first animate(), if you want to add extra 100px it should be left: "+=100px" in the next iteration.
Do you mean something like :
$(document).ready(function(){
$("div").animate({left: "100px"}, "slow");
$("div").animate({top: "100px"}, "slow");
$("div").animate({left: "+=100px"}, "slow");
$("div").animate({top: "+=100px"}, "slow");
});
div {
height: 60px;
width: 60px;
background-color: green;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
I've created a menu for mobile which is hidden and replaced by a burger menu on scroll. Originally I was using jQuery .fadein() and .fadeOut() which was working fine. I wanted them to slide in and out at the same time though so I used .animate() and noticed that it only animates when the scrolling stops. Is there any way to make it animate immediately while scrolling?
Here's a fiddle with the problem
And here's the code:
HTML
<div>
<div class="fade">
menu
</div>
<button id="button" style="background: url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) no-repeat center; background-size: 30px 30px;"></button>
CSS
body {
height: 5000px;
}
.fade {
right:0px;
top: 20px;
position: fixed;
height: 70px;
width: 50px;
background-color: #d15757;
color: #fff;
padding: 10px;
}
#button {
top: 20px;
right: -20px;
opacity:0;
position: fixed;
height: 30px;
width: 30px;
}
Javascript
// detect size of window (i.e. detect mobile)
var mq = window.matchMedia('all and (max-width: 700px)');
// hide menu and display button on scroll
$(window).scroll(function() {
if(mq.matches) {
//width of browser is bigger than 700px
if ($(this).scrollTop()>100)
{
$('.fade').stop().animate({ // menu goes out
right: '-20px',
opacity: '0',
});
$('#button').stop().animate({ // button comes in
right: '30px',
opacity: '1',
});
}
else
{
$('.fade').stop().animate({ // menu comes in
right: '0px',
opacity: '1',
});
$('#button').stop().animate({ // button goes out
right: '-20px',
opacity: '0',
});
}
} else {
// the width of browser is less then 700px
}
});
$(document).ready(function(){
if(mq.matches) {
// the width of browser is more then 500px
$("#button").click(function(){
$(".fade").stop().animate({ // menu comes in
right: '0px',
opacity: '1',
});
$("#button").stop().animate({ // button goes out
right: '-20px',
opacity: '0',
});
});
} else {
// the width of browser is less then 500px
}
});
You called stop() on every scroll event, so the animate will stop.
A trick is adding a class to the menu
// hide menu and display button on scroll
$(window).scroll(function() {
if(mq.matches) {
//width of browser is bigger than 700px
if ($(this).scrollTop()>100)
{
if(!$('.fade').is('.hidden')) {
$('.fade').stop().animate({ // menu goes out
right: '-20px',
opacity: '0',
}).addClass('hidden');
$('#button').stop().animate({ // button comes in
right: '30px',
opacity: '1',
});
}
}
else
{
if($('.fade').is('.hidden')) {
$('.fade').stop().animate({ // menu comes in
right: '0px',
opacity: '1',
}).removeClass('hidden');
$('#button').stop().animate({ // button goes out
right: '-20px',
opacity: '0',
});
}
}
} else {
// the width of browser is less then 700px
}
});
see JSFiddle here
I'm always having trouble with the combination of CSS and JQuery. Can someone tell me what i'm doing wrong here? I just want to move my div. Thanks all for the solutions, I'd like to know a little further. How can i move it more than once in different directions?
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
jQuery(document).ready(function () {
jQuery("#hello").mouseenter(function () {
jQuery("#hello").animate({ left: '150px' }, slow);
});
});
</script>
<div id="hello">
Hello World!
</div>
<style>
#hello{
color: gray;
background-color: gold;
width: 125px;
height: 125px;
position: fixed;
left: 350px;
top: 350px;
border-width: 2px;
border-color: lavender;
text-align: center;
}
</style>
Your div needs a position set when using left, right, top or bottom css propertiy, so there will be no change even though your code seems correct.
Try to set a position to your div, for example relative.
<style>
#hello{
color: gray;
background-color: gold;
width: 125px;
height: 125px;
position: fixed;
left: 350px;
top: 350px;
border-width: 2px;
border-color: lavender;
text-align: center;
position: relative;
}
</style>
<script>
jQuery(document).ready(function () {
jQuery("#hello").mouseenter(function () {
jQuery("#hello").animate({ left: '150px' }, 'slow');
});
});
</script>
If You are using slow/fast option You need to put 'slow' into brackets
jQuery("#hello").animate({ left: '150px' }, 'slow');
You can set animation time with milliseconds without brackets.
The duration parameter of your animate() is undefined (Uncaught ReferenceError: slow is not defined).
It should be either "slow"
jQuery("#hello").animate({ left: '150px' }, "slow");
or
var slow = 200;
jQuery("#hello").animate({ left: '150px' }, slow);
Fiddle (with error)
Fiddle (Updated)
I would recommend the CSS way :hover if its just about mouseover event. If there is more functionality to add, this is better.
I'm trying to animate something using jQuery.
UPDATE
I have it working the way I want it. This is the jQuery:
$(document).ready(function() {
// go chat button
$('#go-chat input').click(function() {
$('#search, #go-chat').animate({width: '0px'}, 1000, function() {
$(this).hide();
$('#login, #go-search').animate({width: '573px'}, 1000, function() {
$(this).show();
}
);
}
);
});
$('#go-search input').click(function() {
$('#login, #go-search').animate({width: '0px'}, 1000, function() {
$(this).hide();
$('#search, #go-chat').animate({width: '573px'}, 1000, function() {
$(this).show();
}
);
}
);
});
});
The problem now is that the text is wrapping as the slide happens and it is very ugly. How could I make it so that the text slides in/out as the search bar and the input fields without it wrapping as the width narrows/expands?
Thanks.
OLD QUESTION
Basically, I want to slide in the search bar to the left, essentially hiding it, and then slide out the 4 inputs below it. For now, I've placed them under the search bar but my plan is to hide them, and when the "Go Chat" button is pressed, the search slides out to the left and the 4 inputs slide in to the right.
Right now, the search box slides in to the center and doesn't disappear fully. How can I make it so it functions as I want it? If my explanation is unclear as to what I'm looking for, please ask for clarification.
Thanks.
Try changing
$('#search').animate({
width: '0px',
},
'1000'
);
to
$('#search').animate({ width: '0px' }, 1000, function() {
$(this).hide();
});
Once the animation is complete, the element will be hidden.
I also noticed that the 'Search' text isn't animated well.
Before doing the animate, try removing (or fading out) the text. Remember to show it again when toggling back. Eg:
$('#search-label').hide();
OR
$('#search-label').fadeOut();
I figured it out. To make it slide to the left, I gave the corresponding surrounding <div>s a width and margin-left: 0px;. Then I had the issue of the text wrapping as the width narrowed/widened. To fix that, I added white-space: nowrap; to the CSS for the corresponding <div>s.
Here's the jQuery:
$(document).ready(function() {
$('#go-chat input').click(function() {
$('#search, #go-chat').animate(
{
width: '0px'
}, 1000, function() {
$(this).hide();
$('#login, #go-search').animate(
{
width: '573px'
}, 1000, function() {
$(this).show();
}
);
}
);
});
$('#go-search input').click(function() {
$('#login, #go-search').animate(
{
width: '0px'
}, 1000, function() {
$(this).hide();
$('#search, #go-chat').animate(
{
width: '573px'
}, 1000, function() {
$(this).show();
}
);
}
);
});
});
... and the CSS:
#search {
border: 1px solid #999999;
-moz-border-radius: 5px;
width: 573px;
height: 40px;
margin: auto;
margin-top: 100px;
margin-left: 0px;
position: relative;
}
#go-chat {
width: 575px;
margin: auto;
margin-top: 36px;
margin-left: 0px;
padding-top: 5px;
white-space: nowrap;
}
#login {
border: 0px;
width: 0px;
display: none;
margin: auto;
margin-top: 100px;
margin-left: 0px;
position: relative;
}
#go-search {
width: 0px;
margin: auto;
margin-top: 36px;
margin-left: 0px;
padding-top: 5px;
white-space: nowrap;
display: none;
}
If anyone has suggestions on the way I formatted the jQuery, please let me know what you think... do you like the way I formatted? I feel like it looks a bit awkward.
$('#search').animate({width: '0'}, 1000, function(){
$(this).hide();
});
The page kind of freaks out on toggle...mind your selectors.