I am new to JS, I am hardworking to improve my skills with JS, so far everything went well, till now, I have to move the img in the nav , when mouse enters it moves down and when it leaves back up.
https://www.youtube.com/embed/8qKRf0cg3Co
I have tried different things to get it done, but im stuck now.
Now, when I moveover the img, it keeps going down and when I leave it wont be back in place.
$(document).ready(function (){
$('.foto').mouseenter(function () {
$(this).animate({marginTop: '+=50'}, 200);
});
$('.foto').mouseleave(function (){
$(this).animate({marginBottom: '-=50'}, 200);
});
You need to use marginTop in mouseleave not marginBottom
$(document).ready(function (){
$('.foto').mouseenter(function () {
$(this).animate({marginTop: '+=50'}, 200);
});
$('.foto').mouseleave(function (){
$(this).animate({marginTop: '-=50'}, 200);
// --^-- change here
});
});
Related
I know this might be silly but I would like to know if there is a way to realize.
Basically, I would like the dropdown-content element to 'KEEP DISPLAYING' even after 3 secs of mouse moving-out of the parental 'dropbtn' button or element.
E.g. code:
$(function() {
$('#dropbtn').hover(function() {
$('.dropdown-content').css('display', 'block');
}, function() {
// on mouseout:
setTimeout(function(){$('.dropdown-content').css('display', 'none');}, 3000);
});
$('.dropdown-content').hover(function(){
$('.dropdown-content').css('display', 'block');
},function(){
$('.dropdown-content').css('display', 'none');
})
});
Current issue is that setTimeout() function is overriding my desired way on this particular line of JS code:
$('.dropdown-content').css('display', 'block');
In another word, I want setTimeout() to be effective if and only if I set not my mouse cursor on 'dropdown-content' div.
Hope someone can help out :)
Instead of using hover, you could use mouseenter/mouseleave to 'toggle' the .dropdown-content, except the delay of 3s on mouseleave:
$(function() {
var dropdownTimeout = null;
$('#dropbtn').mouseenter(function() {
if(dropdownTimeout) {
clearTimeout(dropdownTimeout);
dropdownTimeout = null;
}
$('.dropdown-content').css('display', 'block');
});
$('#dropbtn').mouseleave(function() {
dropdownTimeout = setTimeout(function(){$('.dropdown-content').css('display', 'none');}, 3000);
});
});
This is click function that search area will be slide down right under header. I made this with jQuery slideDown. But I can see that slideDown function is not working right away, It seem like waiting 1 second then slide down.
It is not a big problem, but this is bother me.
Is there any solution?
or this is just how slideDown function work?
Below is my code for reference:
/*header function*/
function showHeaderSearch_PC() {
$('.search_area').slideDown(260);
$('#search_btn_pc').fadeOut(150, function(){
$('#search_close_btn_pc').fadeIn(150);
});
}
function hideHeaderSearch_PC() {
$('.search_area').slideUp(260);
$('#search_close_btn_pc').fadeOut(150, function(){
$('#search_btn_pc').fadeIn(150);
});
}
function showHeaderAllMenu() {
$('.all_menu_area').slideDown(400);
$('#all_menu_btn').fadeOut(150, function(){
$('#all_menu_close_btn').fadeIn(150);
});
}
function hideHeaderAllMenu() {
$('.all_menu_area').slideUp(400);
$('#all_menu_close_btn').fadeOut(150, function(){
$('#all_menu_btn').fadeIn(150);
});
}
$(function(){//PC header search function
$('#search_btn_pc').click(function(){
hideHeaderAllMenu();
setTimeout(function(){ showHeaderSearch_PC();}, 400);
});
$('#search_close_btn_pc').click(function(){
hideHeaderSearch_PC();
});
});
$(function(){//PC header all menu function
$('#all_menu_btn').click(function(){
hideHeaderSearch_PC();
setTimeout(function(){ showHeaderAllMenu();}, 270);
});
$('#all_menu_close_btn').click(function(){
hideHeaderAllMenu();
});
});
I believe, you are using "slideDown" function with some value such as slideDown(500);
If you don't pass any value like slideDown(), it would slide down immediately
here is my fiddle
the '.item' click function that shows the '.pull_down_content' doesn't always work why is this?
i've found that if you click the first 'tile' this will work fine and whilst that is open click the next tile still works fine but if you then go back to the original tile the click function stops working and only the hover works?
why is this?
here is part of my code..
$(this).children('.item').on('mouseenter mouseleave click', function(e) { e.stopPropagation();
if ($('.timelineTile').hasClass("clicked")) {
if (!$(this).data('clicked')) {
var Height = e.type==='mouseenter' ? '60px' : e.type==='click' ? '300px' : '0px';
$(this).siblings('.pull_down_content').stop().animate({'height': Height}, 300);
$(this).siblings('.pull_down_content').children('.inner').css({'display': 'block'}, 300);
if (e.type==='click') $(this).data('clicked', true);
}else{
if (e.type==='click') {
$(this).data('clicked', false);
$(this).siblings('.pull_down_content').stop().animate({'height': '0px'}, 300);
$(this).siblings('.pull_down_content').children('.inner').css({'display': 'none'}, 300);
}
} }
});
It looks like you are adding additional click events on the children every time you click on '.timelineTile'. You should move the above code outside of the '.timelineTile' click event. At the very least remove the existing events before re-adding them.
I'm building a multi-level menu, where the submenu is being displayed with jquery.
It drops down when a main link is hovered, then slides up when the mouse leaves.
I want to stop the mouseleave action, when mouseover is active, but i can't stop the second event (animate->margin-bottom). I'm new to jquery, so i went through many questions and googled a lot, but i don't really understand what i'm supposed to do here. Any help will be greatly appreciated!
jQuery(".item-102 a").on('mouseenter', function() {
jQuery("#horizontal-menu").animate({"margin-bottom": "0px"}, 300);
jQuery("#submenu").slideDown("slow");
});
jQuery("#submenu").on('mouseleave',function() {
jQuery("#submenu").delay(2000).slideUp("slow");
jQuery("#horizontal-menu").delay(2000).animate({"margin-bottom": "+20px"}, 200);
});
jQuery("#submenu").on('mouseover', function() {
jQuery(this).stop();
});
Just try with:
jQuery("#submenu").on('mouseover', function()
{
jQuery(this).stop();
jQuery("#horizontal-menu").stop();
});
I've managed to do it, thanks everyone. Hsz's answer was good, but it didn't fully stop the event, so here's the solution:
function(){
jQuery(".item-102 a").on('mouseenter', function() {
jQuery("#horizontal-menu").animate({"margin-bottom": "0px"}, 300);
jQuery("#submenu").slideDown("slow");
});
var hover_off = false;
jQuery("#submenu").mouseover(function (){
hover_off = false;
});
jQuery("#submenu").mouseleave(function() {
hover_off = true;
setTimeout(myMouseOut, 1000);
});
function myMouseOut(){
if (hover_off == true){
jQuery("#submenu").delay(1000).slideUp("slow");
jQuery("#horizontal-menu").delay(1000).animate({"margin-bottom": "+20px"}, 200);
}
};
I am new to JavaScript and jQuery. I have trouble in my new project. I want to need a image is bouncing. I got a script from net. But This function is only for jumping on the click.I want its jumping when the site is loaded. Please help me.
Link http://www.tycoonlabs.com/help/bouncing%20-%20Copy.html
This is my script
<SCRIPT>
$(function(){
$('#bouncy1').click(function () {
$(this).effect("bounce", { times:5 }, 300);
});
});
</SCRIPT>
Thanks and Regards
If you want to have it bounce while something is happening and then stop it, you could use setInterval
var interval = setInterval(function(){
jQuery('#someId').effect('bounce', {times: 5}, 300);
}, 500); // every half second
// Do some stuff to load up your site;
clearInterval(interval); // Stop the bounce interval
You may want to adjust the times parameter and the delay to meet your needs and effect.
Try this:
<script>
$(function(){
function bounceObject(obj)
{
obj.effect("bounce", { times:5 }, 300);
}
bounceObject($('#bouncy1'));
$('#bouncy1').click(function () {
bounceObject($(this));
});
});
</script>
this works well
function bounce(){
$('#test').effect( "bounce", "slow", bounce);
}
bounce();
http://jsfiddle.net/xGe2D/