jsfiddle:
http://jsfiddle.net/ZcbUW/
When you hover from the top of the blue div and dont move your mouse, the text fades in, out, then in. I have no idea why.
<html>
$("#menu, #arrow").mouseenter(function () {
$('#arrow').stop(true, false).fadeOut("fast");
$("body").children(':not(#menu)').children(':not(#arrow)').css("-webkit-filter", "blur(2px)");
$("#menu").stop().animate({
width: "300px"
}, 300, function () {
$('.text').fadeIn(200);
});
})
$("#menu").mouseleave(function () {
$("#menu").stop().animate({
width: "5px"
}, 300, function () {
$('#arrow').stop(true, false).fadeIn("slow");
});
$("body").children(':not(#menu)').css("-webkit-filter", "none");
$('.text').fadeOut(100);
});
Your selector is weird. So hover is firing on both the menu and the arrow. Try this: http://jsfiddle.net/ZcbUW/2/
Remove this line:
$('.text').fadeOut(100);
Works for me with your example.
Related
I have a webpage with a div container that contains the main content, and inside it there is a div that should appear when I put my mouse in the container. This is the code that I tried:
var running=0;
var running2=0;
$('div.container').mouseenter(function()
{
if (running==0)
{
running=1;
$('div.rightcontainer').css("margin-right",-350)
.animate({marginRight:0}, 750, function(){running=0;});
}
}
);
$('div.container').mouseleave(function() {
if (running2==0) {
running2=1;
$('div.rightcontainer').css("margin-right",0)
.animate({marginRight:-350}, 750, function(){running2=0;});
}
});
This code works:
$('div.container').mouseenter(function() {
console.log('trigger');
$("div.rightcontainer")
.css("visibility","visible")
.css("margin-right",-$("div.rightcontainer").width())
.animate({
marginRight:0
}, 1200);
});
$('div.container').mouseleave(function() {
console.log('leave');
$("div.rightcontainer")
.css("visibility","visible")
.css("margin-right", "320")
.animate({
marginRight:-350
}, 1200);
});
However, the problem is that if the mouse enters multiple times, the object keeps entering and exiting.
Edit:
The .one() only does it once, what I mean is in a way it stacks all the enters and exits and performs the animation that many times.
the .stop() solution was better, however the animation would jump to the end from wherever it was. If there is a way for, if the mouse leaves the container mid-animation, for the animaiton to stop where it is and animate back the other way?
Here is a JSFiddle with a simplified version of the website. The container is anything below the navbar. http://jsfiddle.net/yEzXp/
Use .stop()
$('div.container').mouseenter(function() {
$("div.rightcontainer")
.stop(true, true)
.css("visibility","visible")
.css("margin-right",-$("div.rightcontainer").width())
.animate({
marginRight:0
}, 1200);
});
$('div.container').mouseleave(function() {
$("div.rightcontainer")
.stop(true, true)
.css("visibility","visible")
.css("margin-right", "320")
.animate({
marginRight:-350
}, 1200);
});
I have a button that I want to click (in my case this is '.circle'). When I click it, I want the #data div to fade in then animate with a 'margin-top:50px'. Then when the user clicks the toggle button the second time it animates to 'margin-top:0px' then fades out.
However the problem I have run into is that when I click the toggle the third time I would expect it to run the first function again. But instead it does something weird and resets to a margin-top of 50px before the first function is run again.
I would really appreciate some help with this. Here is a JSFiddle I whipped up with identical code and you will see the problem i'm having after clicking it multiple times. Also another problem was when you click it for the first time it doesn't work, but works on the second click.
http://jsfiddle.net/sN8Tn/
Ill also post the bit of jquery below:
$(".button").click(function(){
$(".button").toggle(
function(){
$("#showme").fadeIn(500,
function(){
$("#showme").animate({ "margin-top" : "50px" }, 500, 'linear');
}
);
},
function(){
$("#showme").animate({ "margin-top" : "0px" }, 500, 'linear',
function(){
$("#showme").fadeOut(500);
}
);
});
});
Remove the .click() function. The click is implied with the .toggle() function. jQuery .toggle() jsFiddle
$(".button").toggle(
function() {
$("#showme").fadeIn(500, function() {
$("#showme").animate({
"margin-top": "50px"
}, 500, 'linear');
});
}, function() {
$("#showme").animate({
"margin-top": "0px"
}, 500, 'linear', function() {
$("#showme").fadeOut(500);
});
});
I want a photo/caption to be toggled on a webpage.
The user clicks, the photo comes up followed by the caption.
The user clicks again, the caption goes away then the photo goes away.
The user clicks, the photo comes up followed by the caption.
On the third click, the photo rapidly appears (does not animate).
Here is my code.
(jQuery-1.8.1.min.js)
$(document).ready(function() {
$('#photo').width(0).height(0).css('opacity',0);
$('#caption').hide();
$('#box').toggle(
function() {
$('#photo').stop().show().animate(
{
width: '400px',
height: '300px',
opacity: 1
}, 500, function() {
$('#caption').stop().fadeIn(500);
}); //end animate
},
function() {
$('#caption').stop().hide(function() {
$('#photo').stop().fadeOut(500);
});
}
); // end toggle
});
Any suggestions?
Need more code?
UPDATE
In order to get the image to animate-in every time it is toggled, then the image has to animate-out.
EDIT2
updated the JSFIDDLE
EDIT:
Another problem showed up, this time with animation.
The jsFiddle works fine but when used with an actual image it does not animate after the first cycle.
I'm trying to stick with your original code (I just added .show() in between the photo's stop and animate calls), but I can't see what's wrong. It seems to work, see jsFiddle here.
UPDATE: I changed the "hide" function per poster's request & also updated the jsFiddle code to reflect this.
$(document).ready(function() {
$('#photo').width(0).height(0).css('opacity', 0);
$('#caption').hide();
$('button').toggle(
function() {
console.log("show");
$('#photo').stop().show().animate({
width: '400px',
height: '300px',
opacity: 1
}, 100, function() {
$('#caption').stop().fadeIn(1000);
}); //end animate
},
function() {
console.log("hide");
$('#caption').stop().hide(function(){
$('#photo').stop().animate({
width: '0px',
height: '0px',
opacity: 0
}, 100);
});
}
);
});
EDIT 3: updated code to work after one cycle : http://jsfiddle.net/kLEFy/17/
$(document).ready(function() {
$('#photo').width(0).height(0).css('opacity', 0);
$('#caption').hide();
$('body').toggle(
function() {
$('#photo').stop().show().animate({
width: '400px',
height: '300px',
opacity: 1
}, 1000, function() {
$('#caption').stop().fadeIn(1000);
}); //end animate
},
function() {
$('#caption').stop().hide(function(){
$('#photo').stop().fadeOut();
$('#photo').width(0).height(0).css('opacity', 0);
});
}
);
});
I have a navigation bar that slides down, very easy, and when that's complete, a small pixel sized line goes across it all to separate sub pages.
When you hover your mouse over it very quickly, it tends to stay visible. As you can see from the filter and stop functions, I don't want any jumpy things happening - it would be great for all of it to be really smooth.
Is there any way of getting this to work smoothly, regardless how retarded the user is as well as it being super responsive?
$(".menu").hover(function() {
$(".children").filter(':hidden').slideDown(300, function() {
$(".menu-line").stop(true, false).animate({ width: "903px" });
});
}, function() {
$(".menu-line").stop(true, false).animate({ width: "0px" }, function() {
$(".children").slideUp(300);
});
});
Working example: http://jsfiddle.net/varFS/
Titanium, you must use timeout for hiding your menu to get desired result:
$(".children").css("padding-top", "21px").hide();
$(".menu").hover(function() {
$(".children").filter(':hidden').slideDown(300, function() {
$(".menu-line").stop(true, false).animate({
width: "400px"
});
});
}, function() {
setTimeout(function() {
if (!$(".menu, .menu ul, .menu ul li").is(':focus')) {
$(".children").css("padding-top", "21px").hide();
}
$(".menu-line").stop(true, false).animate({
width: "0px"
}, function() {
$(".children").slideUp(300);
});
}, 400);
});
Working Example
I have a really simple jQuery script which when an input element is focused on, it expands its width to 250px (using the focusin() event), and when the focus is lost, it shrinks back to 200px using the focusout() event. But I'm not sure I'm using the most syntactically efficient code for what I'm trying to achieve. Here is my current code:
$(document).ready(function() {
$('input').focus(function() {
$(this).animate({
width: "250px"
}, 500);
});
$('input').focusout(function() {
$(this).animate({
width: "200px"
}, 500);
});
});
To me however, this seems unnecessarily bulky. I've tried googling around, but I can't get the keywords right to find any results which help me. Surely there is a much simpler method to achieve such an effect, like a toggle? How would I achieve this?
I see nothing wrong with what you've done. If you feel you're repeating yourself too much, you might pull out some logic into a animateWidth function:
$(document).ready(function() {
function animateWidth(element, width) {
element.animate({ width: width }, 500);
}
$('input').focus(function () { animateWidth($(this), '250px'); })
.focusout(function () { animateWidth($(this), '200px'); });
});