So I have got this demo navigation, which has a small button on the side and when you hover the button, it slides the menu into the window. though I have got the hover working, but now when the mouse leaves, it's still open. how to fix this? I'm pretty new to jQuery by the way
here's the html:
<div id="demoNav">
<button class="open"></button>
<ul>
<li>Home Pagina</li>
<li>Product Pagina</li>
<li>Bestel Pagina</li>
</ul>
</div>
And my jQuery:
$("#demoNav").mouseenter(function(){
$("#demoNav").animate({marginLeft:'0px'}, 500)
});
If you need more info, just tell me, I'll provide more codes.
Try this:
$("#demoNav").hover(
function () {
$(this).animate({
marginLeft: '0px'
}, 500)
},
function () {
$(this).animate({
marginLeft: '50px'
}, 500)
});
You haven't actually told it to hide again.
That said, I'd like to suggest this CSS alternative:
#demoNav {
transition:margin-left 0.5s ease;
-webkit-transition:margin-left 0.5s ease;
}
#demoNav:hover {
margin-left:0;
}
Add a mouseleave event -
$('#demoNav').mouseleave(function(){
$("#demoNav").animate({marginLeft:'50px'}, 500)
});
Use jQuery:
$("#demoNav").hover(function(){
// do something when mouse hover
},function(){
//do some thing when mouseout
});
you coded for mouseenter but forgot to code for mouseleave event
add these lines in jQuery
$("#demoNav").mouseleave(function(){
$("#demoNav").animate({'marginLeft':'50px'}, 500)
});
working example here:
http://jsfiddle.net/EP6wR/
but i will suggest use hover method which is cleaner
syntax: $(selector).hover(handlerIn, handlerOut)
might be this solution works
$('#demoNav .open').on("mouseenter", function(){ $(this).parent().animate({marginLeft:'0px'}, 500); });
$('#demoNav').on("mouseleave", function(){ $(this).animate({marginLeft:'50px'}, 500); });
this will activate the pane on hover of button, but when you leave the div, it'll act again making a left move
Related
I am busy working on a timeline, the basic left right function of it works
the current issue I am having is that the hover function moves the timeline further than I need. I had an idea to stop the animation when the last li (#last) is visible and vise versa when the first li (#first) is visible. I think that my implementation of the jQuery might be wrong and would appreciate your assistance please. See below a JSFIDDLE and the jQuery code.
JSFIDDLE: http://jsfiddle.net/Jason1975/6nwkd2c8/84/
$(document).ready(function(){
if ($("li#last:visible")) {
stop();
} else {
$("a#next").click(function () {
$("#new").animate({
"left": "-=100px"
}, 200);
});
}
if ($("li#first:visible")) {
stop();
} else {
$("a#prev").hover(function () {
$("#new").animate({
"left": "+=100px"
}, 200);
});
}
});
There were a few things I had to change. First was your markup never had a positioning that was able to be moved. So I added position:relative; to #new.
<ul id="new" style="width: 1025px; position:relative;">
Note I also removed the translate property as you were using jQuery's animate, and translate is for CSS3 animations.
I also changed the hover functions to this:
var containerWidth = $('#container').width();
$('a#next').hover(function(){
$("#new").animate({
"left": -Math.abs(containerWidth) - 150
}, 1000);
}, function(){
$("#new").stop();
});
$('a#prev').hover(function(){
$("#new").animate({
"left": 50
}, 1000);
}, function(){
$("#new").stop();
});
And added it inside your document.ready function. I hope this helps!
Here is a working DEMO.
Trying to do some trick with my post information.
When I hover mouse on one element - all elements became active.
How can I made this animation only to hovered element?
Tried it:
$('.post-pic-holder').find('.post-info').hover(function(){
$(this).animate({bottom:'0'},200);
},function(){
$(this).animate({bottom:'-30px'},200);
});
http://jsfiddle.net/fresa150/8ftnF/
You need to target specific descendant, e.g:
$(document).ready(function(){
$('.post-pic-holder').hover(function(){
$(this).find('.post-info').animate({bottom:'0'},200);
},function(){
$(this).find('.post-info').animate({bottom:'-30px'},200);
});
});
--DEMO--
FYI, jQuery hover method accepts in/out handler:
$('.post-pic-holder').hover(function (e) {
$(this).find('.post-info').animate({
bottom: e.type === "mouseenter" ? 0 : -30
}, 200);
});
--DEMO--
But could be done only in CSS for browser which support CSS3 transition:
.post-info {
transition: bottom 200ms;
}
.post-pic-holder:hover .post-info {
bottom: 0;
}
--DEMO CSS--
Try this:
$(document).ready(function(){
$('.post-pic-holder').hover(function(){
$(this).first().animate({bottom:'0'},200);
},function(){
$(this).first().animate({bottom:'-30px'},200);
});
});
I have the following simple code:
jQuery( document ).ready(function( $ ) {
$('.menu ul li:has("ul")').hover(function() {
$('>ul', this).stop().slideToggle();
});
});
I'm using the 'no conflict' way of firing jQuery but for some reason my slide toggle is closing on hover rather than opening! What am I doing wrong? I'm sure its simple but I just can't see it.
An example can be seen here http://ng1club.everythingcreative.co.uk
Use mouseenter and mouseleave instead. Sometimes hover without the second function as a hover out, triggers twice.
$('.menu ul li:has("ul")').mouseenter(function() {
$('>ul', this).stop().slideDown();
}).mouseleave(function() {
$('>ul', this).stop().slideUp();
});
Try this according to documentation you can use hover and apply effect on hover and hover out
jQuery('.menu ul li:has("ul")').hover(
function() {
jQuery('>ul', this).stop().slideDown();
}, function() {
jQuery('>ul', this).stop().slideUp();
}
);
.hover()
Sample Fiddle
I found a topic for revealing a DIV upwards but as I am no Javascript expert, I am wondering how I can make this work onClick rather than on hover?
Just in case this helps, the link to previous topic is: How to make jQuery animate upwards
Any help is appreciated.
Here is a sample demo
$("#slideToggle").click(function () {
$('.slideTogglebox').slideToggle();
});
$("#reset").click(function(){
location.reload();
});
HTML:
<button id=slideToggle>slide</button>
<br/>
<div class="slideTogglebox">
slideToggle()
</div>
$(document).ready(function() {
var isClicked = false; //assuming its closed but its just logic
$('.button').click(function() {
if (isClicked) {
isClicked = true;
$(this).closest('div').animate({
height: "150px",
}, 400, "swing");
}
else
{
isClicked = false;
$(this).closest('div').animate({
height: "50px",
}, 400, "swing");
}
});
});
This is pretty bad way of doing it any way. You should consider trying to use CSS3 instead and then jsut using jQueries toggleClass
.toggleClass('animateUpwards)
Lets the browser use hardware capabilities to animate all the stuff and also its a nice one liner in JavaScript.
Try jQuery slideUp or as posted elsewhere jQuery slideToggle - Alternatively CSS3 Example
or from the questions you posted, perhaps this is what you meant:
http://jsbin.com/ogaje
Clicking the (visible part of) the div
$(document).ready(function() {
$('.featureBox').toggle(function() {
$(this).animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $(this).slideUp()
},
function() {
$(this).animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $(this).slideDown()
});
});
Clicking something else
$(document).ready(function() {
$("#button").toggle(function() {
$("#someDiv").animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideUp()
},
function() {
$("#someDiv").animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
// or $("#someDiv").slideDown()
});
});
I have one drop down menu,
<ul>
<li><a>link 1</a>
<ul><li><a>link 1</a></li></ul>
</li>
</ul>
I am using the following JS to use hover and show child menus.
I want to add delay to the mouse out function (when the class of the LI removed) about 500ms,
$('li').hover(function(){
$(this).addClass('over');
}, function(){
$(this).removeClass('over');
});
Please do needful in this.
thanks in advance
You can do something like this:
$('li').hover(function(){
var timer = $(this).data('timer');
if(timer) clearTimeout(timer);
$(this).addClass('over');
}, function(){
var li = $(this);
li.data('timer', setTimeout(function(){ li.removeClass('over'); }, 500));
});
This clears any timeout when hovering over it (in case you hover, leave, hover back you need to check this) and sets a 500ms delay when leaving the hover, storing the timeout ID on the li itself using .data().
$('li').hover(function(){
$(this).addClass('over');
}, function(){
setTimeout(function(){$(this).removeClass('over')}, 500);
});