I have four images on a page and when I hover over the image, I want a horizontal div to move up on the bar, and when the mouse pointer moves off of the image, I want it to slide back down. Now when I do this is works fine, however there seems to be a delay. Also, if I move back and forth repeatedly, the delay is more and the slider ends up going up and down on its own for a few seconds. Here is the code, please help!
$('.indexgall').on('mouseenter',function()
{
$(this).addClass('hoverimg');
$(this).children().animate(
{
top: 150
}, 600, function()
{
});
});
$('li').on('mouseleave',function()
{
$(this).removeClass('hoverimg');
$(this).children().animate(
{
top:250,
}, 600, function()
{
});
});
From your code, it doesn't look there should be a delay. Can you post a JSFiddle to show this problem in action?
To address the latter concern, you want to be using the JQuery stop() method to stop the animation by cleaning the animation queue.
This can be done, like so:
$(this).stop().animate({
width: 240
}, 500);
Check out this JSFiddle.
Related
I'm having a problem where I'm making a function in JavaScript (JQuery):
$('.login').click( function() {
$('#login-container').animate({
left: 0
}, 300, "swing", function(){
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
});
Whereas "login" is a button and login-container is a big div which contains a form which people can use to login.
I'm trying to make the giant container that slides over the page only turn its background color to lower the website's exposure but it's working and as far as I know, the code is correct.
The first animation happens but the second one (referring to the backgroundColor) doesn't even start at all.
Thanks in advance
EDIT:
I've simplified my code to see if it was a problem of my syntax or JS simply not applying this animation:
$('.login').click( function() {
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
And the element does not have its background-color applied, for some reason.
I don't actually get what you're trying to say here, but if you want to toggle that animation you can use $.toggle() of jquery after the user clicks.
If you want to animate this stuff, look at this documentation provided by jQuery
jQuery Animation
I'm going to try to make this as descriptive as possible, my apologies in advance if I have difficulties explaining what it is exactly that I am trying to do.
Written Description:
So I am creating a web based game in javascript. This game is a 2 player shooter game. So far, when a player 'shoots' another player, it spawns an animated div which goes from its start (at the gun of player1) to the end of the screen where it then gets removed (using removeChild from the div it was spawned in.)
The problem is that when the bullet 'hits' the player, it jsut keeps on going until the end of the screen. My code does register whether or not the bullet hits the player, but when it does hit the player, I would like it to dissappear either on the player or right after it passes the player, so that it has the effect that it penetrates the player instead of just passing over the player.
Now let me be more specific.
$("#bullet").animate({
marginLeft: '100%'
}, 1000, function(){
document.getElementById("thegame").removeChild("#bullet");
});
basically this is the code that spawns the 'bullet'
now lets say that I wanted to get the bullet to disappear after it's margin passed 70% by doing some sort of loop that checks its position as the animated div is traveling..
how would I do this? (the bullet is #bullet)
I tried doing a loop for this but i must have failed because it didn't work.
Use step option of .animate() , .stop()
var money = $("#thegame span")[0];
$("#bullet").animate({
marginLeft: '100%'
}, {
duration: 1000,
step: function(now, fx) {
// calling `.stop()` triggers `.fail` callback
if (now > 70) $(fx.elem).stop()
},
done: function() {
document.getElementById("thegame").removeChild(money);
},
fail: function() {
document.getElementById("thegame").removeChild(money);
console.log(this, this.style.marginLeft)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="bullet">abc</div>
<div id="thegame"><span>thegame</span></div>
Use setTimeout()for this purpose,
function myfun(){
setTimeout(function(){$("#welcome").show(100)}, 2000);
setTimeout(function(){$("#welcome").hide(500)}, 7000);
}
setInterval()would invoke the supplied code for every time interval that you gave
Having some trouble fully understanding how animations in jQuery are queued and initialized. Trying to get more comfortable with the concept by writing some button effects.
I want to turn the code from the pen below into a smooth animation (as you can see if you hover over the button multiple times you run into some issues) that executes each animation on hover in ONLY when there is not another animation going on, and then execute hover out animations ONLY when the hover in animation finishes.
Here is my code: http://jsbin.com/larukayi/1/edit
Thanks in advance for any help!
I think below changes give you the expected result:
button1.css("cursor", "pointer").hover(
function(){
slideup.stop(true).animate({
"bottom":"0px"
}, 150, 'linear');
slideup.delay(100).animate({
"left":"50px"
},150,'linear');
slideright.delay(550).animate({
"left":"0px"
}, 100, 'swing');
},
function(){
slideright.stop(true).animate({
"left":"-50px"
},150,'linear');
slideup.delay(100).animate({
"left":"0px"
}, 150, 'linear');
slideup.delay(100).animate({
"bottom":"-100px"
},150,'linear');
});
I use jQuery function that should animate divs (Slide down and up) like a dynamic menu or something.
The problem is even I set up delay() - when mouse goes over it, no matter how long the cursor stays over one div it will slidewon and up.
To clarify. If I put a mouse over the certain div, it works well, it waits the delay and then slide. But if I fast goes over all divs in the example it will make a weird reaction, like the divs start to slide down but then suddenly stops and go up. Try my fiddle and you'll see.
This is the FIDDLE
jQuery(".subdiv").hide();
jQuery(".mydiv").hover(function(){
jQuery(this).find(".subdiv").stop().delay(800).slideDown("slow");
}, function(){
jQuery(this).find(".subdiv").stop().delay(200).slideUp("slow");
});
So something like this:
http://jsfiddle.net/GzxJf/12/
jQuery(".subdiv").hide();
jQuery(".mydiv").hover(function(){
jQuery(".subdiv").each(function() {
if(jQuery(this).attr('display') !== "none") {
jQuery(this).stop(true).slideUp("slow");
}
});
jQuery(this).find(".subdiv").slideDown("slow");
}, function(){
jQuery(this).find(".subdiv").slideUp("slow");
});
I am trying to make a div slide down when the mouse moves over another div just above it. Basically the div above it is just the trigger that makes the div slide down. Mouseover of .trigger makes .slidedown expand, and mouseout of .slidedown makes itself slide back up. Here's the code i have so far:
$(document).ready(function() {
$('.slidedown').hide();
//When mouse rolls over
$('.trigger').mouseover(function(){
$('.slidedown').stop().animate({
height: ['toggle', 'swing'],
}, 600, function() {
// Animation complete.
});
});
//When mouse is removed
$('.slidedown').mouseout(function(){
$('.slidedown').stop().animate({
height:'0px'
}, 600, function() {
// Animation complete.
});
});
});
This works, but there are just two teaks i need help with. Firstly, after mouseout and the .slidedown div slides up and disappears, if i then mouse over the .trigger div again, nothing happens. It should make the .slidedown move down again. I need it to every time keep working. I tried removing the .stop() but it still doesn't work.
Also can i make it also slide back up if the mouse moves out of .trigger but only if it isn't moving out of .trigger into .slidedown? This is so incase the user doesn't move the mouse into .slidedown, it would remain forever which isn't good. Or just have a time limit that it can remain expanded if the mouse doesn't move over .slidedown.
Second, is there a way to make a delay of around 1 second between mouseout and the div sliding back up? Thanks for your help!
You might try using the jQuery hover event. For the delay, you can put the closing animation in setTimeout:
$(document).ready( function(){
$('.trigger').hover( function(){ // enter animation
$('.slidedown').stop(true,true).animate({
height: ['toggle', 'swing'],
}, 600, function() { /* animation done */ });
}, function(){ // leave animation
setTimeout( function(){
$('.slidedown').stop(true,true).animate({
height: '0px',
}, 600, function() { /* animation done */ });
}, 1000 );
});
});
You might also look into the hoverIntent plug-in for more nuanced control over the mouseenter/mouseleave behavior, including timing.
I think you'll find that setting a numerical height in $('.trigger').mouseover() may help the animation be repeatable. FYI, you can set an integer number for something like height or width in jQuery and it will automatically set the unit to px for you.
As Ken pointed out, setTimeout is useful for a delay in code, but keep it in your $('.slidedown').mouseout() event or the slideown div will hide after you mouseout of the trigger div instead of when you leave the slidedown div as you specified.