I have this hover function for animating my imgs which works but after words when you re-size the window the images do not re-align with the width of the window, before the hover event the images will re-align, how do I reset the images after hover event show the images can be re-sized with the window?
$('.gallery img').hover(function(){
$('.gallery img').each(function(){
$(this).css({'top': $(this).offset().top, 'left': $(this).offset().left});
});
$('.gallery img').css({'position': 'absolute', 'z-index': 1});
$(this).css('z-index', 10);
$(this).animate({
width: "+=14",
height: "+=14",
left: "-=7",
bottom: "-=7"
});
}, function(){
$(this).css('z-index', 1);
$(this).animate({
width: "-=14",
height: "-=14",
left: "+=7",
bottom: "+=7"
});
});
You have supplied 2 functions for the hover().
E.g. .hover(function(){},function(){})
The first one is when the mouse enters, and the second one is when the mouse leaves.
I suspect the culprit is:
.css({'position': 'absolute', 'z-index': 1});
In the second function, try setting position: static. I would say after the animation.
Related
I'm having an issue with trying to reset a div, containing an image, to the original value after I have animated it.
So I have a sort of quiz with 6 pictures positioned next to each other.
The user has to select one of 6 pictures. When clicked on that picture I make the picture go fullscreen. Afterwards, when the user doubleclicks on the picture the picture should go back to the original position for the next question.
However the return is not working and I don't understand why.
Beware: the divsare floated divs with specific left-positions so I would need to retain these...
This is the animation-code:
$(".candidatePicture").click(function(e){
$(e.target).css('z-index', 1);
$(e.target).animate({top: '0', left: '0', width: '1920px', height: '1080px'}, 1000);
});
This is the return code:
$(".candidatePicture").css({ 'width': '250px', 'height': '300px', 'z-index': '0' });
You can find the code here: http://jsbin.com/gotuqenoce
Thank you for your help.
please try to change the events handlers as follow:
$(".candidatePicture").click(function(e){
var $this = $(this);
$this.css('z-index', 1);
$this.animate({top: '0', left: '0', width: '1920px', height: '1080px'}, 1000);
$this.off("click");
});
$( ".candidatePicture" ).dblclick(function(e) {
$(this).css({ top: '', left: '', 'width': '', 'height': '', 'z-index': '' });
showNextQuestion();
});
http://jsbin.com/latiqemozo/edit?html,output
I have a div with height:0px and I want it to increase height to 300px when I click on a button.
When I click on the button again, I want it to get height of 0px again.
CSS
nav{
height:0px;
overflow:hidden;
opacity:0;
}
JS
$("#hamburger").click(function(){
$('nav').stop().animate({ height: 300, opacity: 1 }, 'slow');
},function(){
$('nav').stop().animate({ height: 0, opacity: 0 }, 'slow');
});
If I only use:
$("#hamburger").click(function(){
$('nav').stop().animate({ height: 300, opacity: 1 }, 'slow');
});
the animation works. as soon as I add the other line, it doesn't. I also tried using the toggle() function, but the result was that as soon as I load my page, the second part of the toggle function (which is height:0, opacity:0) loaded by itself.
here is a link to my website
Any ideas? Thanks
EDIT
I forgot to say that i am making my website responsive, and that this js code only concerns the mobile version, so to see the result, you should set your browser width to 480px or less
You're trying to call both functions at the same time. One function wants to increase the height of the div, and the other wants to decrease the height of the div.
Try something like this:
$("#hamburger").click(function(){
var maxHeight = 300;
if(+$('nav').height() < maxHeight) {
$('nav').stop().animate({ height: 300, opacity: 1 }, 'slow');
} else if (+$('nav').height() === maxHeight) {
$('nav').stop().animate({ height: 0, opacity: 0 }, 'slow');
}
});
To make it even shorter, you could do:
$("#hamburger").click(function(){
var maxHeight = 300,
nav = $('nav');
nav.stop().animate({ height: +nav.height() < maxHeight ? 300 : 0, opacity: +nav.css('opacity') === 1 ? 0 : 1 }, 'slow');
});
By the way, the random + signs typecast any strings into numbers, just in case.
I have a navigation bar that sticks out a little bit from the right edge of the screen. I want it so when you hover on the div, it slides left 550px out of the right side of the browser. I'm using jquery's animate function and I got it to animate properly when hovered, but I can't get it to slide back to the right when you stop hovering on it.
I'm very new to javascript/jquery and I feel like I'm missing something simple...
$(document).ready(function(){
$("#nav").hover(function() {
$(this).animate({
right: "0px",
}, 800 );
(function() {
$(this).animate({
right: "-550px",
}, 800 );
});
});
});
And here's #nav's css:
#nav {
position: absolute;
right: -550px;
min-width: 300px;
top: 10px;
height: 50px;
background-color: #B30431;
}
The code has some syntax errors. The code should be :
$(document).ready(function(){
$("#nav").hover(
function() {
$(this).animate({ right: "0px" }, 800 );
},
function() {
$(this).animate({ right: "-550px" }, 800);
}
});
});
Good Luck !!
You have made your hover function complicated, you have wrapped the function with () and your function is not executed.
$(document).ready(function() {
$("#nav").hover(function() {
$(this).animate({ right: "0px" }, 800);
}, function() {
$(this).animate({ right: "-550px" }, 800);
});
});
One option, which we use a lot for our animation, is to make a css class that contains that animation, and then ise the .addClass() method to trigger the animation. Its fast, and its browser compatible. You could also use pure css for this.
You could try this...Demo
$(document).ready(function(){
$("#nav").mouseover(function(){
$(this).delay(200).animate({right: "0px"}, 800 );
// Added a 200ms delay to prevent quick accidental mouse overs triggering animation.
});
$("#nav").mouseout(function(){
$(this).clearQueue();
// Gives the user the ability to cancel the animation by moving the mouse away
$(this).animate({right: "-550px"}, 800 );
});
});
I have a div that I want to go full-screen (100% width/height of Window size) onClick of a button.
How would I go about this using Javascript/jQuery?
DEMO
$('div').click(function() {
$(this).css({
position:'absolute', //or fixed depending on needs
top: $(window).scrollTop(), // top pos based on scoll pos
left: 0,
height: '100%',
width: '100%'
});
});
$('div.yourdivclass').click(function(){
$(this).css('height','100%').css('width','100%');
})
What have you tried? What didn't work?
Take a look at that:
http://jsfiddle.net/6BP9t/1/
$('#box').on('click',function(e){
$(this).css({
width:"100%",
height:"100%"
});
});
I would do this:
$('#idOfDiv').click(function() {
$(this).css({position:'fixed', height: '100%', width: '100%'});
});
jsfiffle: http://jsfiddle.net/P6tgH/
$('div').click(function(){
var win = $(window),
h = win.height(),
w = win.width();
$(this).css({ height: h, width: w });
});
http://jsfiddle.net/TQA4z/1/
This is an alternate to the answer marked as correct. Plus it gives him what he asked for to close the div.
Using toggle class is much easier than having your css in your jquery. Do everything you can do to keep css separate from JavaScript.
For some reason my https is effecting loading of the JavaScript on load of that jsfiddle page. I clicked on the Shield icon in chrome address bar and chose to run scripts.
Toggle Class Demo
Something like
$('#buttonID').click(function() {
$("div > div").toggleClass("Class you want to add");
});
I used the jQuery mouseout and mouseenter function. But is not working good. Because when you go fast over the items. I get verry crazy effects. I used this code:
$('.hover').css('opacity', 1);
$('.controlNav li').mouseover(function() {
$('.hover', this).css({ display: 'block' }).animate({ top: -73, opacity: 1 }, 450, 'swing' );
}).mouseout(function(){
$('.hover', this).css({ display: 'none' }).animate({ top: -60, opacity: 0 });
});
How can i fix my problem?
I added in .stop() just before the animation which will stop the animation in place and should stop the jumping.
$('.controlNav li').mouseover(function() {
$('.hover', this).css({ display: 'block' }).stop().animate({ top: -73, opacity: 1 }, 450, 'swing' );
}).mouseout(function(){
$('.hover', this).css({ display: 'none' }).stop().animate({ top: -60, opacity: 0 });
});
The problem originaly is not mouseout or mouseover events. They are working as they should to work. It means even if you mouse over the element for just 1ms it will work.
Solution for this problem is delaying the action. You should wait a certain amount of miliseconds to do what you want happens.
You can do it manually or you can just use jQuery hover intent plug in that implemented this very nice and easy to use.
It's better to not use mouseout or mouseover event and use jQuery .hover() (if you are using the plug in .hoverIntent() for more clean and readable code.
set some variable as mutex, like:
var isActive = false;
('.hover').css('opacity', 1);
$('.controlNav li').mouseover(function() {
if(isActive) return false;
isActivce = true;
$('.hover', this).css({ display: 'block' }).animate({ top: -73, opacity: 1, complete: function(){isActive = false} }, 450, 'swing' );
}).mouseout(function(){
$('.hover', this).css({ display: 'none' }).animate({ top: -60, opacity: 0 });
});
.mouseover() and .mouseout() give strange results because mouseover() fires more than once while your mouse is still inside the element. Simple mouse movement will trigger it again & again.
.mouseenter() and .mouseleave() are better because they are only supposed to fire one time upon entering or leaving the element. However, they still do not seem to function as well as .hover() which combines them together into one method.
Also adding a .stop() will stop the current animation before starting a new one. .stop(true, false) will clear anything in the animation queue and not allow the current animation to complete.
$('.controlNav li').hover(
function() {
$('.hover', this).css({ display: 'block' }).stop(true, false).animate({ top: -73, opacity: 1 }, 450, 'swing' );
},
function() {
$('.hover', this).css({ display: 'none' }).stop(true, false).animate({ top: -60, opacity: 0 });
});
http://api.jquery.com/hover/
http://api.jquery.com/stop/