Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Location
    Maryland, USA
    Posts
    165
    Thanks
    12
    Thanked 0 Times in 0 Posts

    quirky animations, jQuery bugs?

    Hello,

    I've created a number of jQuery animations for a website that I'm creating, and I've noticed some inconsistent problems. I'm seeing a few bugs in FF, but mostly IE.

    When using the show("explode") animation, the image pieces will appear as very small when the image is not cached. After reload, the animation works perfectly. I've tried preloading the image to fix this but it makes no difference.

    I'm also using an animation that changes text color on rollover. If you roll the mouse over the menu items very fast, sometimes they get stuck in the middle of an animation, and you have to rollover them again to finish the sequence.

    Are these just bugs that are part of the jQuery library? Can the be avoided? Am I doing anything wrong?

    Here is a link that includes both relevant animations.

    Here's the relevant jQuery script:

    Code:
    function home_page_animation(front_image, title, menu){
    	var front_image_div = $(front_image);	
    	var title_div = $(title);
    	var menu_div = $(menu);
    	
    	menu_div.css({"opacity" : "0", "top" : "0"});
    	title_div.css({"opacity" : "0"});
    	
    	front_image_div.show("explode", {}, 2500);
    	title_div.animate({"opacity" : "1"}, 4500, 
    		function(){
    			$(this).animate({ "opacity" : "0"}, 2000, function(){
    				$(this).css({"display" : "none"});
    				menu_div.css({ "display" : "block"});
    				menu_div.animate({ "opacity" : "1", "top" : "70px" }, 2000);
    			});
    		}
    	);
    	
    }
    
    
    function menu_rollover(){
    	$(".menu ul li a").hover( function(){
    		$(this).stop().animate({ 
    							//   "fontSize" : "1.2em",
    							   "color" : "#1D69EF"
    							    }, 500);
    	}, function(){
    		$(this).stop().animate({ 
    							 //  "fontSize" : "1em", 
    							   "color" : "white" 
    							    }, 500);
    	});
    }
    BTW, when using the fontSize animation, things really go nuts in IE.

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Have you logged bugs on the JQuery's bug tracker?

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Location
    Maryland, USA
    Posts
    165
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thanks. Yes, I logged the bug quite some time ago. I'm assuming that the bug is arising from some conflict with another part of my code, but I can't isolate it.

    Any ideas for a fix or workaround?

  • #4
    New to the CF scene
    Join Date
    Oct 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's the same behaviour I was experiencing, sadly the only alternative was to use a different framework. Prototype is excellent

  • #5
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    these are not bugs, it is poorly coded jquery is all.

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 584 Times in 565 Posts
    why the empty object, that doesn't jive with http://docs.jquery.com/Effects/show



    Code:
    front_image_div.show("explode", {}, 2500)
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #7
    Regular Coder
    Join Date
    Jun 2007
    Location
    Maryland, USA
    Posts
    165
    Thanks
    12
    Thanked 0 Times in 0 Posts
    I'm not sure why I had that empty object in there. It may be an deprecated code (I made it a while ago) or just a mistake.

    In either case, I've removed it and it hasn't changed the behavior.

    Too bad... I was very excited for a moment.

    I've upgraded this site to the most recent version of jQuery (although no new jQuery UI has been released). The problems persists.

    Any new ideas?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •