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.

Reverse onClick Event

I am a genuine javascript novice and looking some pointers in my learning - not homework nor is it anything commercial.
I have a function here which shows an element which is hidden due to the first 2 lines of the function. I start by clicking the heading and the 2 hidden divs appear, which is exactly what I wanted to happen. However, now when I use this second function, it won't return to it's windown onload state. Why is this? Is there a better way to achieve this?
1st Function
$(window).ready(function(){
$('.miniC').css("display", "none");
$('.miniI').css("display", "none");
$(".heading").click(function(){
$('.miniC').slideDown();
$('.miniI').slideDown();
$('.miniC').show();
$('.miniI').show();
});
});
2nd Function (Reverse)
$(window).ready(function(){
$(".hideOut").click(function(){
$('.miniC').slideUp();
$('.miniI').slideUp();
$('.miniC').hide();
$('.miniI').hide();
});
});
Thanks in advance and any reference to good reading material is appreciated.
* Corrected Missing closing quote - this was a mistake of me typing it into Stack Overflow - Sorry! *

It seems like you want to toggle the visibility of an element, and since you're already sliding it, why not just use slideToggle:
$(".miniC").css("display", "none");
$(".miniI").css("display", "none");
$(".heading").click(function () {
$(".miniC").slideToggle();
$(".miniI").slideToggle();
});
Example

You shouldn't need to call .hide() and .show() - they will be dealt with as part of the slide functions. However, you're calling them immediately after the slide, but that takes a while to complete (400ms by default) meaning that .hide() fires before .slideUp() completes.

Outside the question scope, but still applicable.
$('.miniC').css("display", "none");
$('.miniI').css("display", "none");
This part of the page functionality should probably in CSS, which will result in the browser rendering the initial paint of the page correctly. In your case the browser paints the "miniC" and "miniI" elements, then your jQuery code updates the CSS display property to "none" for both individually. Triggering two additional repaints of the page. So, basically with the jQuery code you are drawing the page three times for an effect that could achieved with a single paint.
Then like Charlie said add a listener for the click.
$(".heading").click(function () {
$(".miniC").slideToggle();
$(".miniI").slideToggle();
});

Because slideUp() and hide() are written inside the click event. So, it wont fire on window ready, but only onclick of $(".hideOut").

There is a typo in your first function.
a single quote is missing in the line:
$('.miniC).show();

jquery mouseenter do this, mouseleave do that, click do this and stop mouseenter/mouseleave events

I am trying to have an image attribute source replaced on mouse enter mouse leave event. And when clicked, the image should stay as active. I need the mouseleave event to stop after clicking has been made. So far the mouseeleave still continues after clicking, switching back the image , here is the code below:
<script>
jQuery('.paypal').mouseenter(function(){
jQuery('.paypal').attr('src','http://url-to-my-active-image.jpg');?>');
}),
jQuery('.paypal').mouseleave(function(){
jQuery('.paypal').attr('src','http://url-to-my-inactive-image.jpg');
}),
jQuery('.paypal').click(function(){
jQuery('.paypal').css('opacity','1');
});
</script>
How can I achieve that?.

Just turn off the mouseleave when you click with:
jQuery('.paypal').click(function(){
jQuery('.paypal').css('opacity','1').off('mouseleave');
});

A quick solution seems to be to add a class on click, and then check for the presence of that class on mouseleave; if it's there, do nothing.
<script>
jQuery('.paypal').mouseenter(function(){
jQuery('.paypal').attr('src','http://url-to-my-active-image.jpg');?>');
}),
jQuery('.paypal').mouseleave(function(){
if(!jQuery('.paypal').hasClass('selected')){
jQuery('.paypal').attr('src','http://url-to-my-inactive-image.jpg');
}
}),
jQuery('.paypal').click(function(){
jQuery('.paypal').css('opacity','1').addClass('selected');
});
</script>
#j08691's answer is probably easier to maintain, especially if you're using a recent version of jQuery (1.7 or higher).

You can turn off the mouseleave handler inside the click handler by using off:
jQuery('.paypal').click(function() {
jQuery('.paypal').css('opacity', '1');
jQuery('.paypal').off('mouseleave');
});

jQuery Class selector not working

I'm struggling to make an alert come up when an anchor tag with a specific class is clicked inside of a div.
My html section in question looks like this...
<div id="foo">
<a class='bar' href='#'>Next</a>
</div>
The jQuery section is as follows..
$('.bar').click(function()
{
alert("CLICKED");
});
My problem is that I cannot get this alert to come up, I think that I'm properly selecting the class "next", but it won't pick it up for some reason. I've also tried almost everything on this page but nothing is working. If I don't try to specify the anchor tag i.e. $('#foo').click(function()... then it works, but there will be multiple anchor tags within this div, so simply having the alert executed when the div is clicked won't work for what I need. The website this is on is a search engine using ajax to send information to do_search.php. Within the do_search.php I make pagination decisions based on how many results are found, and if applicable, a next, previous, last, and first link may be made and echoed.
EDIT: I just figured it out, it was my placement of the .next function, since it wasn't created on the initial document load but instead after a result had been returned, I moved the .next function to the success part of the ajax function since that is where the buttons will be created if they need to be, now it works.

Try using the live() command:
$(".bar").live("click", function(){ alert(); });
Because you load your button via AJAX, the click event isn't binded to it. If you use the live() command, it will automatically bind events to all elements created after the page has loaded.
More details, here

.live is now deprecated and is the selected answer for this. The answer is in the comments in the selected answer above. Here is the solution that resolved it for me:
$(document).on('click','.bar', function() { alert(); });
Thanks to #Blazemonger for the fix.

You surely missed $(document).ready(). Your code should be:
$(document).ready(function(){
$('.bar').click(function()
{
alert("CLICKED");
});
});
Hope this helps. Cheers

Make sure you have included JQuery Library properly.
Make sure your script has written between $(document).ready() in short $(function(){ });
Demo : http://jsfiddle.net/W9PXG/1/
<div id="foo">
<a class='bar' href='#'>Next</a>
</div>
$(function(){
$('a.bar').click(function()
{
alert("CLICKED");
});
});