jQuery fade stop error: jQuery(".box").stop().fadeIn();

This code is not working, what im doing wrong?


var x; x=jQuery(document); x.ready(inicializarEventos); function inicializarEventos() { var x; x=jQuery(".Caja2"); x.hover(entraMouse,saleMouse); } function entraMouse() { jQuery(".Caja2").stop().fadeOut(); } function saleMouse() { jQuery(".Caja2").stop().fadeIn(); }

-------------Problems Reply------------

It appears (to me) that you want to have a box that will fade out when the mouse is positioned over it, and will reappear when the mouse is moved away. This is actually trickier than it initially appears.

When you call $().fadeOut(), what happens is jQuery animates the fade, and then sets display: none on that element. Because the element is then removed from the display list, the mouseOut event is fired, which of course then begins the fadeIn() effect. This results in an endless loop of mouseIn and mouseOut events as long as your mouse is hovered in that area.

What you may want to try is using the $().fadeTo() method. In the following example, I am animating the opacity property to 0.0 when the mouse enters, and back to 1.0 when the mouse leaves. Because the element is never actually hidden (just invisible), the mouseOut event is able to fire correctly.


function inicializarEventos() {
$(".Caja2").hover(entraMouse, saleMouse);

function entraMouse() {
jQuery(this).fadeTo("slow", 0.0)

function saleMouse() {
jQuery(this).fadeTo("slow", 1.0)

In the future, I would suggest explaining why you think "the code is not working". You need to define how you expect the code to function, and what the current result is. That will help me an others better know how to answer your question.

Dreas Grech from the comments is correct. You need to check if the element is being animated before calling the .stop() method on it. Try this:

function entraMouse() { jQuery(".Caja2:animated").stop();jQuery(".Caja2").fadeOut(); }
function saleMouse() {jQuery(".Caja2:animated").stop();jQuery(".Caja2").fadeIn(); }

Category:javascript Views:1 Time:2009-07-16

Related post

  • Yellow fade effect with JQuery 2009-05-11

    I would like to implement something similar to 37Signals's Yellow Fade effect. I am using Jquery 1.3.2 The code (function($) { $.fn.yellowFade = function() { return (this.css({backgroundColor: "#ffffcc"}).animate( { backgroundColor: "#ffffff" }, 1500

  • Jquery fade in - fade out help 2011-07-15

    $('.HelpBoxOk').live('click',function() { var BoxHelpMain = $(this).parent().parent().parent().parent().parent().parent(); var ShouldFadeIn = false; //if the button says next then there is more divs to fadein if it says ok then no more divs to fade i

  • jquery fade in fade out on hover for multiple elements 2011-12-20

    I am working on a portfolio page and would like to use jquery to fade in some information over the image when the user hovers over the item. I am quite new to back-end jquery stuff so just starting to get my hands dirty. I have managed to get the fad

  • jquery color picker error 2012-03-20

    I am trying to implement the jquery colorpicker(last one) from eyecon.ro/colorpicker but whenever I click on the actual colorpicker nothing appears jquery throw this error message $("#colorSelector").ColorPicker is not a function onChange: function (

  • Best Practices for MVC, jQuery and Handling Errors 2009-08-04

    Does anyone have a elegant way of dealing with errors in ASP.Net MVC? I constantly run into issues when dealing with requests to controller actions where the Action can be used for both normal requests and AJAX requests. The problem I have is finding

  • Jquery Fade when page content is loaded 2010-02-01

    I want to create an effect in jquery that waits until every element of my page is done loading before anything is displayed. The same effect is done here. As you can see, when you load or refresh the page, the background color appears and when everyt

  • jQuery fade effects and Ajax login 2010-02-27

    I'm using the following piece of code to login a user via Ajax. //Capture the login_ajax form $("#login_ajax").submit(function () { //First we fade out the header-login div $("#header-login").fadeOut('fast', function() { $(this).html("Loading").fadeI

  • jQuery dialog throws error 2010-10-17

    I've created two plugins (A and B), where plugin B is dependent on plugin A. In plugin A I use jQuery UI Dialog for user interaction and this works fine. Dependency: Plugin A is a filebrowser. Clicking a button opens a dialog window where user can se

  • jQuery AJAX form error. Empty string 2011-08-25

    I am having a problem when I submit a contact form via Ajax to a PHP script. I have used the jQuery/Ajax function previously as well as the contact script, however on this occaison the process runs as far as the ajax request and then returns the erro

  • jQuery Fade in Site/Content Once It's Loaded? 2011-11-10

    Are there any tutorials or plugins for fading a site into view once its loaded properly, to limit any jarring etc, so the content appears smoothly basically? I suppose it would be easier if it was just a specific area, as a header or footer will alre

  • jQuery validation, put error message below groups of checkboxes and radio buttons 2011-11-11

    I have a form that has a few groups of checkboxes and radio buttons. The error message for the radio buttons always shows up directly after the first radio button in the group. I was able to get the error messages to display below the groups of check

  • jQuery - Autocomplete - keystroke errors 2011-12-12

    I added autocomplete functionality to a textbox in my application - $( "#cplPageContent_ctlInputSrch_txtSearch" ).autocomplete({ source: aAvailableTags }); aAvailableTags is a comma delimited list. I included - http://ajax.googleapis.com/ajax/libs/jq

  • jquery fade in fade out priority 2011-12-20

    I have recently posted about a hover effect with hover. It now works ok, but I was wondering if there is a way to prioritise the effect. For example, if the user goes through a sequence of image rollovers quickly it takes a while for the animation to

  • jquery.simplemodal > script error on ie8 2011-12-26

    I'm facing a javascript error when using jquery.simplemodal on internet explorer 8; works fine on chrome, firefox, safari. error is 's.d.wrap' is null or not an object on line 475. any idea on how to have it working on internet explorer 8 ? Relevant

  • jquery fade hover 4 issues 2012-01-12

    I have four issues with a jquery fade to black on image hover: — The first is a minor issue — there is a black border around the images which I can't get rid of. — The second is that occasionaly on hover one of the images decreases in size (see attac

  • Javascript Conflict (Fade-In VS. jQuery Accordion) 2012-01-28

    I am using a basic fade-in javascript function for a title image on one of my pages and when I try to use the jQuery vertical accordion menus on that page, it prevents the title from being loaded. I've gone through all the javascript code (of the fil

  • Jquery Validation Engine Error Messages and eric martin modal window 2012-03-19

    I am using jquery validation engine in modal window. But error messages corresponding to the modal window are attached with the main form. when i am scrolling the main form, modal window's error messages are also scrolling with the form but it should

  • jQuery fade out & fade in wont redirect me 2012-03-31

    I am using this jquery script to fade out and fade in pages, <script type="text/javascript"> $(document).ready(function() { $("body").css("display", "none"); $("body").fadeIn(1000); $("li").click(function(event){ event.preventDefault(); linkLoc

  • IE 10 broke Ancestry.com Facebook Update function - jQuery not called error popup 2014-12-02

    WIN7 SP1 with IE10 has broken the Ancstry.com individual’s page Facebook update link. I ONLY receive a popup "jQuery" not called error box when I view an individual’s Ancestry page -- with the IE10 browser -- that has an update link to his Facebook p

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.120 (s). 11 q(s)