We Keep Coding

Jquery CSS mouse hover animation not working smoothly

I have converted a flash ad using jQuery. Everything is working fine, but my mouse hover animation is not working smoothly. There is text "Details" at the bottom right, and when mouse is moved over the text, then the whole container turns black. I have added the effect as:
$('#disclaimer').hover(
function () {
$('#wrapper').addClass('hovered');
}, function () {
$('#wrapper').removeClass('hovered');
}
);
But it is not working perfectly; sometimes it works, and sometimes it does not. If I move my mouse over the "D" character of "Details", then it does not work. What am I missing here? I want this effect to work smoothly whenever I move my mouse over "Details" character; it should turn black.
Any suggestions?? this is my JsFiddle code.

When you hover over the #Disclaimer element, you set several elements to display:none;, including this one.
As this element disapears, the hover event is no longer active, so you end up with an infinite loop. To avoid that, use opacity:0; instead, which will keep your elements in place but not visible.
Also, to avoid the #disclaimer to move around, make it position:absolute;.
Here is the JS Fiddle
CSS
.hovered #Image_Car { opacity:0; }
.hovered #ctaBtn { opacity:0; }
.hovered #Image_logo img { opacity:0; }
.hovered #headlineText { opacity:0; }
.hovered #disclaimer { opacity:0; }
#disclaimer {
/* ... */
position:absolute;
top: 168px;
left: 235px;
}

I'd recommend just using the CSS :hover property, no sense in using javascript for simple styling changes like this.
You're having issues with a specific element not being associated with the parent element's hover functionality, which can be avoided by adding a rule to the parent's CSS and working from there.

The problem here is that when the hovered is show the Detail text is set to none, so the hover out event will dispatch, removing the hovered class!
You can fix this, by changing disclaimer hover part with this:
$('#disclaimer').mouseenter(
function (e) {
$('#wrapper').addClass('hovered')
.mouseleave(function () {
$('#wrapper').removeClass('hovered');
})
});
So the detail will disappear when the mouse leaves the div, you can also change the mouseleave to mousemove if you want it to disappear just on move.
Here is the result http://jsfiddle.net/r3BTU/2/

You can set up to classes (a hidden and a visible) and the switch between the classes with js.
var movingElement = document.getElementById("messageDiv");
var disclaimer = document.getElementById("disclaimer");
disclaimer.onmouseover= function(){
movingElement.className="class2";
};
disclaimer.onmouseout= function(){
movingElement.className="class1";
};
You can add trasitions in the css so the visible class "fades" in.
Here's a Demo:
http://jsfiddle.net/Nillervision/eSbzg/

Changing Visibility of HTML elements

I want to change the visibility of HTML elements except some particular elements. I want the elements to be at the same positions and alignments and just the visibility of elements to be changed. Can somebody please help me doing that?
I tried doing the same using jquery by seeing the answer to How to hide all elements except one using jquery? but this changes the positions and alignments of elements.
$('body > :not(#averageCustomerReviews)').hide(); //this hid everything
$('#averageCustomerReviews').appendTo('body'); //but this changed the position
I currently have locators to elements like xpaths/CSS Selectors which I don't want to hide.
For e.g. I have this link. And I want to view only at the place it is right now by hiding all other elements.

VISIBILITY USAGE
jQuery
$("#element").css("visibility", "hidden");
CSS
#element {
visibility: hidden;
}
If you want all the others elements than #element to be "invisible":
jQuery
$(":not(#element)").css("visibility", "hidden");
CSS
:not(#element) {
visibility: hidden;
}
ANSWERING YOUR 'AFTER' QUESTION - LET ALL INVISIBLE EXCEPT ONE
If you can't assign an 'invisible' class to the elements that should be invisibile (best solution), you can render visible only one child element in this manner, see JsFiddle.
That mean:
set all 'invisible': $("*").css("visibility", "hidden");
set visible the element you want to show: $("#element").css("visibility", "visible");
In your case the element you would like to show is a little 'nested' and you can do in this manner:
// set all 'invisible'
$("*").css("visibility", "hidden");
// set visible the element with their 'sub-child'
$("#averageCustomerReviews_feature_div, #averageCustomerReviews, #averageCustomerReviews a, .reviewCountTextLinkedHistogram, .reviewCountTextLinkedHistogram a, .a-popover-trigger, .a-popover-trigger i").css("visibility", "visible");
Not nice, but it works.
With a html tree complex like this one and without any possibility to assign some custom class. I think that this is the only solution...

Use visibility: hidden;. Unlike display: none; the element will still be there.
Too apply to all elements except one use a style like this:
* {
visibility: hidden;
}
#element {
visibility:visible !important;
}
JSFiddle
Information on visibility.

If you are looking to hide everything but #element then use this:
:not(#element) {
visibility: hidden;
}
See here for more info on the :not() selector: https://developer.mozilla.org/en-US/docs/Web/CSS/:not
UPDATE
You can also chain :not() selectors together to exclude multiple elements. For example, if you have #element1 and #element2 that should not be hidden from view, then do something like this:
:not(#element1):not(#element2) {
visibility: hidden;
}

You can set up in CSS, where class is the class that's on all the elements you want to hide:
.class {
visibility: hidden;
}
and then
$('#element').css('visibility', 'visible');

use this
jquery
$("#elementid").onclick(function() {
$('body').css({ 'visibility': 'hidden'});
$('#elementid').css({ 'visibility': 'visible'});
});

CSS Transition while moving an element from a div to another div

I am trying to use jquery's html() to move around an element. Please see the example below.
HTML:
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="myDiv"></div>
Jquery:
//on some event (for example, onclick, onmouseover, onkeydown....), the code below will be triggered
var $myDiv = $("#myDiv");
$("#div1").html($myDiv);
//after some other event, the code below will be triggered
$("#div5").html($myDiv);
//after some other event, the code below will be triggered
$("#div4").html($myDiv);
//etc....
Basically, I am trying to move $myDiv among div1-5 using the method html() above.
But I want to have transition too when $myDiv moves from one div to another div
I tried the following css but it didn't work.
CSS:
#myDiv {
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;
}
I don't know the size of all the divs and the size might change, so I can't really use transition on top and left.
Hope someone can have a good solution.
Thanks

You can use the jQuery sortable plugin.
You can give each draggable div an in of sortable, then use the following jQuery:
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
Remember you will need to include jQuery UI:
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

jQuery toggle class animation

I found this code:
$('li input:checked').click(function() {
$(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000);
});
It's working well, when a click the element for the first time. It fades the background color, but when I click it again, it delays for 1000 ms, and then flashes the other background color. I want it animated when it has the class, and when not, not only when clicked for the first time.

This is easy with CSS transitions:
JS:
$('li input:checked').click(function() {
$(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000);
});
CSS:
.uncheckedBoxBGColor {
background-color: orange;
/*other properties*/
transition: background-color .3s;
}
This will add the effect whenever the class is turned ON, but when it doesn't have that class then there are no transitions defined. So instead, you can turn on this transition for ALL <LI> elements like so:
CSS:
li { transition: background-color .3s; }
OR for all <INPUT> elements following an <LI><INPUT> combination:
li input { transition: background-color .3s; }
You get the idea of it..

The jquery.toggleClass function isn't made for fading anyhow. See http://api.jquery.com/toggleClass/ for more details.
If you want to fade in/out the background color, try using the CSS3 transition feature like explained at Mozilla's side: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions.

Maybe because you are using "input:checked"
try using
$('li input[type=checkbox]').click(function () {
$(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000);
});
this is working for me.

JQuery FadeIn/Out Only Works One Time

I have a very simply div that uses JQuery to fade in when the mouse hovers over the div. Then when the mouse leaves the div it fades back out.
My Problem: The fade in/out only works once. When I place my mouse over the div the second time it doesn't fade in.
Whats going wrong? JSFiddle: http://jsfiddle.net/hWyUn/3/
<div id="test" style="opacity: 0; width: 100px; height: 100px; background-color: red;">
</div>
$("#test").mouseenter(function()
{
$(this).css("opacity","1").fadeIn();
});
$("#test").mouseleave(function()
{
$(this).fadeOut();
});

Using fadeTo Worked for me:
$("#test").mouseenter(function()
{
$(this).fadeTo("slow", 1);
});
$("#test").mouseleave(function()
{
$(this).fadeTo("slow", 0);
});
Here: http://jsfiddle.net/hWyUn/4/

See the jQuery docs. fadeOut() will set the display property to none once it finishes. Effectively removing it from your page.
http://api.jquery.com/fadeOut/

It will work only if element is hidden.
You can set the element's display to none by doing $(element).css('display', 'none') before $(element).fadeIn() :)

You could always try using the the jQuery's Animate to animate the opacity, instead of fading in and out. Might be shorter code.
Animating the opacity will not set the display to none, so you can still fiddle around with it after it is faded out.
See my jsFiddle here

Fixed your problem.
Check out the fiddle...
jsFiddle