We Keep Coding

can't get a hover event to work on a sibling of a target element using jquery ui duration paramater or CSS

My goal is to change the background color of an element and one of its siblings that is higher in the DOM but in the same parent on hover. I was able to use css transition to change the first element but i couldn't get the sibling to change. so I looked into jquery UI addClass effect
I wanted the code below to work since I couldn't get a css solution to work, the goal was to change both elements on hover
$(document).ready(function(){
$('.circletag').hover(function() {
$(this).addClass( "red");
$(this).parent().find('title').addClass('red', 2000);
}, function() {
$(this).removeClass('red', 5000);
$(this).parent().find('title').removeClass('red', 2000);
});
})
I was able to get a fade effect on the $(this) elements but the .title element is not showing any changes at all.
when .circletag is hovered I would like .circletag backgroud to change and the .title background to change at the same time over a 2 second interval. If It cant be done with css which is the way I would prefer the solution I would appreciate a jquery one.
Also I'm curios to know why the console says
SyntaxError: syntax error
.ui-helper-hidden {
Why does the duration not work in this addClass function when im using jquery ui? So weird for me.
why is it that when the mouse is moves off the element it does not take 5 seconds to remove the class? it looks like the css transition rule is calling the shots.
basically I want the div with the class of .title's backgound and .circletag background to fade in and out on hover of .circletag.
jsfiddle
Thanks for your help guys.

Try it like this:
$(document).ready(function(event){
$('.circletag').hover(function() {
$(this).addClass( "red");
$(this).parent().find('.title').addClass('red', 2000);
}, function() {
$(this).removeClass('red', 5000);
$(this).parent().find('.title').removeClass('red', 2000);
});
})
You need to specify the class selector in 'find' function..
Let me know :)

Try this,
$(this).parent().find('.title').addClass('red', 2000);
you need to use ".title" inside your find() if you are referring a class.
Fiddle
Hope this helps.

Is it possible to bind a handler to a jQuery effect?

I would like to call function when slideUp or slideDown are performed on an element. Is this possible?
Something like:
$('#panel').on('slideUp', function() { open--; });
$('#panel').on('slideDown', function() { open++; });
Update: The problem is that there are a ton of slide calls (e.g.: $().slideUp()) all over the page, within ajax responses, hash link clicks, etc.. I was hoping to bind to the slide itself somehow rather than add code to each calling function.

You cannot bind to an event since there is no such.
But you can pass a handler that will be called after animation is finished
$('#panel').slideUp(function() { ... });
http://api.jquery.com/slideUp/

If you really want to do this, you can use custom events and your own little plugin, something like this:
$.fn.mySlideToggle = function() {
this.slideToggle();
this.trigger('mySlideToggle');
}
$('div').on('mySlideToggle', function(){ console.log('hey') });
$('button').on('click', function(){ $('div').mySlideToggle(); });
Here's a little demo (check console): http://jsbin.com/asejif/2/edit
In your case it is redundant though, since you can use the callback that the slide events provide, but it might be useful for other things...

After jQuery ajax load or update, I lose the mouseover event

After using .load to update my div, that is add item to my list, I used firebug and saw that the list was updated. However, I lost the mouseover event that worked when the page first loaded. In my script js I have:
// hide and show are css classes that display none and block respectively
function openList(){
$("#miniList").removeClass().addClass("show");
}
function closeList(){
$("#miniList").removeClass().addClass("hide");
}
...
$(document).ready(function() {
$("#miniList").mouseover(function() {
openList();
})
$("#miniList").mouseout(function() {
closeList();
})
});
function addItemToDiv(id, ref, num) {
$("#miniList").load("/list/ajax_updateList.jsp", {
'action' : 'additem',
'pid' : id,
'pref' : ref,
'qty' : num
});
}
Of course, this works fine the first time the page is loaded, but when I add item to the list, DOM is update but mouseover effects don't work any more.
Any thoughts are more than welcomed.

For DOM elments added dynimically you need to use the jquery .live() function.
Please go through the below link, I think that might fix your problem:
api.jquery.com/live
#ishwebdev, this is common problem we run , for all the DOM elments added after pageload like run time, we need to bind the events through live instead of regular bind
If you are using jquery 1.4 use below code:
// from jquery.com
$('give your selector here').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
// do something on mouseover
} else {
// do something on mouseout
}
});

#siri: thanks for the excellent answer, it worked for me right away. Here's my shopping cart dropdown example:
Before:
$("#cart-items").mouseenter(function(){
$('#cart-pulldown').show();
});
After:
$("#cart-items").live('mouseenter', function(){
$('#cart-pulldown').show();
});
With .live the event handling still works even after I change the underlying HTML via an Ajax call.

The selected answer no longer works for jquery 1.9+.
Instead, use "on" event, like
$( document ).on("keyup", "input.assets",function(event) {...
http://api.jquery.com/on/

Loop over elements in jQuery when element is double clicked

I'm new to jQuery and Javascript. I'm trying to make a button that I can double click which then loops through all elements in the webpage with a certain class and fades them.
Currently, I'm trying this:
$(".fadeall").dblclick(function() {
$("div.section").each(function(idx,item) {
item.fadeTo(25,inactiveOpacity);
});
});
In my debugger I see the double click happening, but the function in the each call is not being triggered.
I'm believe I'm not matching the div.section elements correctly, but don't know the correct approach.

It should be erroring out since the DOM element doesn't have a .fadeTo() function, you need to wrap the element you're looping over (item) in a jQuery object, like this:
$(item).fadeTo(25,inactiveOpacity);
Or, this works as well, for example:
$(".fadeall").dblclick(function() {
$("div.section").each(function() {
$(this).fadeTo(25,inactiveOpacity);
});
});

Assuming the HTML has <div> elements with the class section, the only other thing I can see that you would need to do is wrap item in a jQuery object.
$(".fadeall").dblclick(function() {
$("div.section").each(function(idx,item) {
// Wrapped "item" so you have access to jQuery methods
$(item).fadeTo(25,inactiveOpacity);
});
});
Since item is the DOM element, it needs to be wrapped with a jQuery object so that it will have access to methods like .fadeTo().
Another approach is to use this in the .each(), which will refer to the DOM element as well.
$(".fadeall").dblclick(function() {
$("div.section").each(function() {
// Wrapped "this" so you have access to jQuery methods
$(this).fadeTo(25,inactiveOpacity);
});
});
EDIT:
Also, make sure the DOM is loaded before your code runs:
// Wrapping code like this ensures that the DOM elements will be
// loaded before your code runs.
$(function() {
$(".fadeall").dblclick(function() {
$("div.section").each(function() {
// Wrapped "this" so you have access to jQuery methods
$(this).fadeTo(25,inactiveOpacity);
});
});
});
This is a shortcut for jQuery's .ready() method, which will ensure that your code doesn't run until the elements are available.

:hover selector doesn't work with jQuery 1.4

Googled about it - found nothing.
I'm talking about CSS :hover, not jQuery .hover().
So, the code:
$('#something a:hover').css({'something': 'thomesing'});
works fine with 1.3, but not with 1.4. How to fix it?

Follow the rules
This is a superb example of why we must always code according to the documentation, and not according to the possibilities. Hacks, or mere oversights like this, will eventually be weeded out.
The proper jQuery (plain css is better) way to do this follows:
$("#something a").hover(
function() {
// $(this).addClass("hovered");
$(this).css("color", "red");
},
function() {
// $(this).removeClass("hovered");
$(this).css("color", "black");
}
);
The $.fn.hover method takes up to two arguments and serves as syntactic sugar for more explicit pointer (mouse) events. In fact, the hover method in jQuery 2.1.0 was nothing but this:
function( fnOver, fnOut ) {
return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}
Understand your code, and be concise
As you can see, the fnOver function is called when you enter the element, and again when you exit (if no other method is provided). With this understanding, we can setup simpler instructions:
$("#something a").hover(function () {
$(this).toggleClass("hovered");
});
Native almost always wins
Ultimately, vanilla CSS is the way to go. The :hover pseudo-class has been around for a long time, and works with targeting not only the element to which it belongs, but nested elements as well:
#something a:hover {
background: red;
}
#something a:hover .icon {
animation: 2s rotate ease-out;
}
With something as broadly-supported as :hover, I can think of no good reason to avoid it.

:hover is not a documented pseudoclass selector.
Try this:
$('#something a').hover(function(){
$(this).css({'something': 'thomesing'});
},
function(){
$(this).css({'something': 'previous'});
});
Although, you'd be better to use CSS classes:
$('#something a').hover(function(){
$(this).toggleClass("over").toggleClass("out");
},
function(){
$(this).toggleClass("over").toggleClass("out");
});
http://docs.jquery.com/Events/hover
EDIT:
In respose to BlueRaja's comment below, the following would be more suitable:
$('#something a').hover(function(){
$(this).addClass("over").removeClass("out");
},
function(){
$(this).removeClass("over").addClass("out");
});

hover changed in 1.4 and funny no one here seems to have bothered checking the jQuery docs...
$("#something a").hover(
function () {
$(this).toggleClass("active")
}
);
Change the colors via css.
Note:
Calling $(selector).hover(handlerInOut) is shorthand for:
$(selector).bind("mouseenter mouseleave",handlerInOut);

:hover is not supported in jQuery (see docs).
It doesn't really make sense either: jQuery selectors are used to select elements. What would ":hover" select?
I'm surprised it even works in 1.3

I don't think it does work in 1.3. As Philippe mentioned, it doesn't make sense.
:hover is an event, not an attribute. So I don't see how that selector could work.
You could either use the hover function as antpaw mentioned - http://docs.jquery.com/Events/hover#overout
or you could set a css style rule. e.g.
$('head').append("<style type='text/css'>#something:hover{foo: bar}</style>");

you can use .hover() function or even better plain css

To me, that selector doesn't make much sense, because it depends on an event by the user. Selectors are more about static content, where as the function hover() can track an event. The user would have to have his mouse on top of the content when you made the call.
There might be some cases that it would be useful, but in the case you mentioned, Jonathon Sampson has the right answer. Use $("#something a").hover(function() {$(this).css("something","thomesing");}); instead.

How jQuery works is that it parses selectors (whether css or regular ones) and then returns the jQuery object. As of today , jQuery doesn't support ':hover' selector.
It might work in Chrome or FF or Safari, but will definitely fail in IE6, 7 and 8.
Great workaround would be to either use jQuery's hover() method.
In more complex cases you want to register mouseenter and mouseleave event handlers on container that you want to select with ':hover', and add/remove '.hover' class.
Once the regular 'hover' class is there, you can easily access that container element from anywhere in the code using '#container.hover' selector.
Let me know if you need help coding this...