Develop Reference

How do i make action happen to specific, but repeated element

I want to make a specific action (keyframe animation and show text) happen on .hover on a specific image, but when i hover it happens to all of the images.
the closest answer i could find was this
$(document).click(function(event){
alert(event.target.id);
});
});
I took off the alert and changed with the right code, but wasn't able to get it to work.
here is the jsfiddle - i didn't change the pictures for other elements because i don't know how to make it work around, but feel free to do it if necessary.
https://jsfiddle.net/8746s0v5/2/
Thank you in advance.

Use this keyword:
$('.artista img').mouseenter(function(event){
$(this).closest('.artista').find('h3').show();
$(this).addClass('bounce');
});
$('.artista img').mouseleave(function(event){
$(this).closest('.artista').find('h3').hide();
$(this).removeClass('bounce');
});

Button that displays and hides a sliding menu

I'm trying to build a header with a menu button that triggers a sliding menu. I can make the menu appear when I press the button, but I also want it to dissappear when I click the button again.
This is the event that triggers when the button is clicked.
$('#nav-button').click(function () {
$("#slidermenu").animate({right: "0px"}, 200);
$("body").animate({right: "300px"}, 200);
});
I looked up the animate method and saw that it has a function called done, which takes two parameters. A promise and a boolean. So I figured I can use a if-statement to check if the animation is done, and if the animation is done, the button would send the slidermenu back.
But how can I test if animate().done() is true? Or is there a more simple way of achiveing this?
Here is my fiddle.

.is(':animated') will return true if it's currently being animated.
In the context of what you're trying to do:
if(!$('#slidermenu').is(':animated'))
{
// Animation has finished
}
As an aside:
I try and do this with CSS only now where possible. If you use jQuery toggleClass and predefine the right attributes in your CSS for the toggled classes, you can add a CSS transition to deal with the animation. Just thought it was worth mentioning (this does come with it's own compatibility issues).

Like DeeMac said, it may be better to do this with css transition instead of jQuery animate. But just to add an option, I'll try to show you how to get this to work with jQuery animation also.
First of all, instead of inspecting if the animation is still running or not, you can just stop the ongoing animation before starting another. It will make the button to respond immediately to the users clicks.
For finding out if the menu is open or not, you can use toggleClass. This way you can just use hasClass to determine in which direction you need to animate the menu.
So, this what I came up with:
$('#nav-button').click(function () {
$("#slidermenu").stop();
animateToPosition = "0px";
if ($("#slidermenu").hasClass("open")) {
animateToPosition = "-300px";
}
$("#slidermenu").toggleClass("open");
$("#slidermenu").animate({
right: animateToPosition
}, 200);
});
I made a Demo. If you are going with the css solution, it's fine. Maybe this will help someone else in the future.

How can I keep mega sub menu open after mouse leaves top navigation button?

I am new to jQuery. I am trying to set up a mega drop down that is 100% width on the screen but the content is centered. Also the top navigation buttons are centered.
How can I keep the sub content area open after the mouse leaves the top button?
Here is the fiddle: http://jsfiddle.net/uf1107qs/
$('.top1').on('mouseenter', function () {
$('.sub1').slideDown(200).addClass('.abTop');
$('.fades1').delay(50).fadeIn(200);
});
$('.top1').on('mouseleave', function () {
$('.sub1').delay(600).slideUp(200).removeClass('.abTop');
$('.fades1').fadeOut(0);
});

did you want the .subX and .fades1 keep showing and never closed?
perhaps this is this what you want?
JSFIDDLE
Edit :
sorry for my misunderstanding before. You can achieve that by using setTimeout rather than delay, here's the result : JSFIDDLE, it's still ugly though, because there are many repeated code inside it.
Basically you need to setTimeout when mouseleave the top, and clearTimeout when mouseenter the top or sub
Other Way :
the other way around to achieve it, you can use only CSS by using CSS property like position, visibilty, opacity, z-index like in this example on JSFIDDLE

Instead of using delay, or a timeout.. you can use what's called a callback function, which is supported by most jQuery built-in functions. This is your code:
$('.top1').on('mouseenter', function () {
$('.sub1').slideDown(200).addClass('.abTop');
$('.fades1').delay(50).fadeIn(200);
});
Here is my version using the concept of a "callback":
$('.top1').on('mouseenter', function () {
//see the difference?
$('.sub1').slideDown(200, function(){
$('.fades1').fadeIn(200);
}).addClass('.abTop');
});
Essentially what is happening, is that slideDown() is able to accept an optional parameter that is function. This function will then get triggered only AFTER 200ms have passed (Since you have it set to slideDown(200)).
So callback function in this case, is simple a function that is called, only after the parent function (for simplicity sake) is done doing what it's supposed to do. For more info:
http://www.w3schools.com/jquery/jquery_callback.asp
ALSO
Since you are new to jQuery, you should definitely check out the hover() function. You will be able to simplify your code by probably half the amount of JS lines, and be much more readable!
http://api.jquery.com/hover/

mouseenter leave cause flicker in jQuery

The below code works but on mouse enter causes flicker
$("#helptext").bind("mouseenter",function(){
$("p:first",this).text("helptext.");
}).bind("mouseleave",function(){
$("p:first",this).text("");
});
The below code does not work
/*
$("helptext").mouseout(function(){
$("p:first",this).text("sdlfksdlfjskldjl");
}).mouseover(function(){
$("p:first",this).text("mouse over");
});*/
I want to remove the flicker or get the second code working.
The HTML for above
<div id="helptext"><img alt="Help Text" src="/static/help.png"></img><p></p></div>

I suggest using hover() this instead of binding to mouseenter and mouseleave looks cleaner to me.
$("#helptext").hover(function(){
$("p:first",this).text("helptext text.");
}, function(){
$("p:first",this).text("");
}
);
Btw. I guess without more of your HTML/CSS code I think we can't solve this issue as the above doesn't flicker for me at all.
Check here http://jsbin.com/ihuna/

This may be kind of obvious, but isn't the piece of code that isn't working missing a # in the first line?
Seems like it should be:
$("#helptext").mouseout(function(){
$("p:first",this).text("sdlfksdlfjskldjl");
}).mouseover(function(){
$("p:first",this).text("mouse over");
});

I think it could be the issue with hover in JQuery version you are using. I am facing the issue of multiple calls for hover when the mouse enters bound element's children.
Check out the following.
http://bugs.jquery.com/ticket/5821

Why is this jQuery animation jumping up and down?

CSS is more or less irrelevant. How do I stop jumping?
jQuery(function() {
jQuery("#showquickfind").mouseover(function() {
jQuery("#quickfind").animate({
height: "show",
opacity: "show"
}, "slow");
return false;
});
jQuery("#quickfind").hover(function() {},
function() {
$("#quickfind").animate({
opacity: 1.0
}, 1125).slideUp(375);
return false;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
show me
<div id="quickfind">
<ul>
<li>test</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>

You may want to look at chaining the jQuery.stop() command before each animate command. It stops all the currently running animations on the specified elements.
i.e.
jQuery("#quickfind").stop().animate({
height:"200px", opacity: 1},"slow");
return false;
Is there a reason you are using jQuery instead of the shorthand $ for the jQuery object? you can use the $ shorthand for the jQuery object, even if using other libraries that use it, by following this pattern-
(function($) {
//Your code here using $ shorthand for jQuery :)
})(jQuery);
This means that $ within the scope of the outer function is a reference for the jQuery object.
I have set up your code on this sample page. If you want to edit it, then add "/edit" to the URL.
Also, Are you sure that "show" is a valid value for height and opacity?
My understanding is that height needs to be set to either auto(i.e. size of containing block), a length or a percentage relative to the containing block, and opacity should be a value between 0 and 1 (jQuery abstracts away differences between browsers and will use whichever opacity attribute is appropriate i.e. opacity or filter:alpha(opacity))

You have the same problem I did. What's happening is that your hover event happens, the quickfind slides up, but then it disappears, so it shows again, etc, etc, etc.
The only way I've found to make it stop jumping is to keep a height set on the container element, so that it always stays that height.

You might want to use the mouseenter event, not mouseover.
The difference is described in the jQuery documentation.
Mouseover fires when the pointer moves into or out from child element, while mouseenter doesn't.
There's also the example how to use it, you have to use the bind() function.
Edit
After all the best solution could be to use hover(), as Russ Cam has mentioned in the comments.
BTW
You're registering the hover-handle multiple times, each time one goes over the "show me"-link.