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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Sep 2008
    Posts
    280
    Thanks
    25
    Thanked 9 Times in 9 Posts

    jQuery - IE 6 & 7 issue

    Hi i have this code:

    Code:
    // JavaScript Document
            jQuery(document).ready(menu);
        function menu(){
                    jQuery("#menu li a").hover(function() {
                            jQuery(this).animate({
                                    width: '230px'
                            }, 500);
                    },
                    function() {
                                            jQuery(this).animate({
                                                    width: '260px'
                                            }, 500);
                                    }
                    );
            }
            jQuery(document).ready(paraHover);
        function paraHover(){
                    jQuery(".main p").hover(function(){
                            jQuery(this).css("color", "#000000");
                    },
                            function(){
                                    jQuery(this).css("color", "#404040");
                            }
                    );
            }
            jQuery(document).ready(hoverEffect);
        function hoverEffect(){
                    jQuery(".lawnImages").css("filter", "alpha(opacity=40)");
                    jQuery(".lawnImages").css("-moz-opacity", "0.4");
                    jQuery(".lawnImages").css("-khtml-opacity", "0.4");
                    jQuery(".lawnImages").css("opacity", "0.4");
                    
                    jQuery(".lawnImages").hover(function(){
                            jQuery(this).css("display", "block");
                            jQuery(this).animate({
                                    opacity: 1,
                            }, 600);
                    },
                    function(){
                            jQuery(this).animate({
                                    opacity: 0.4,
                            }, 600);
                    });
            }
            jQuery(document).ready(hoverEffect2);
        function hoverEffect2(){
                    jQuery(".smallPicture a").hover(function(){
                            jQuery(this).css("display", "block");
                            jQuery(this).animate({
                                    opacity: 0.4,
                            }, 600);
                    },
                    function(){
                            jQuery(this).animate({
                                    opacity: 1,
                            }, 600);
                    });
            }
    Works fine in all other browsers apart from IE 6 & 7... can anyone tel me why?

    www.activegardenmaintenance.co.uk is where it is active

  • #2
    Regular Coder Iszak's Avatar
    Join Date
    Jun 2007
    Location
    Perth, Western Australia
    Posts
    332
    Thanks
    2
    Thanked 58 Times in 57 Posts
    The problem is that when you're defining keys and values in the animate function you've got a comma after it and Internet Explorer is expecting another key/value but all it gets is a closing so change it from.
    Code:
                            jQuery(this).animate({
                                    opacity: 1,
                            }, 600);
    to
    Code:
                            jQuery(this).animate({
                                    opacity: 1
                            }, 600);
    That should produce..
    Code:
    // JavaScript Document
            jQuery(document).ready(menu);
        function menu(){
                    jQuery("#menu li a").hover(function() {
                            jQuery(this).animate({
                                    width: '230px'
                            }, 500);
                    },
                    function() {
                                            jQuery(this).animate({
                                                    width: '260px'
                                            }, 500);
                                    }
                    );
            }
            jQuery(document).ready(paraHover);
        function paraHover(){
                    jQuery(".main p").hover(function(){
                            jQuery(this).css("color", "#000000");
                    },
                            function(){
                                    jQuery(this).css("color", "#404040");
                            }
                    );
            }
            jQuery(document).ready(hoverEffect);
        function hoverEffect(){
                    jQuery(".lawnImages").css("filter", "alpha(opacity=40)");
                    jQuery(".lawnImages").css("-moz-opacity", "0.4");
                    jQuery(".lawnImages").css("-khtml-opacity", "0.4");
                    jQuery(".lawnImages").css("opacity", "0.4");
                    
                    jQuery(".lawnImages").hover(function(){
                            jQuery(this).css("display", "block");
                            jQuery(this).animate({
                                    opacity: 1
                            }, 600);
                    },
                    function(){
                            jQuery(this).animate({
                                    opacity: 0.4
                            }, 600);
                    });
            }
            jQuery(document).ready(hoverEffect2);
        function hoverEffect2(){
                    jQuery(".smallPicture a").hover(function(){
                            jQuery(this).css("display", "block");
                            jQuery(this).animate({
                                    opacity: 0.4
                            }, 600);
                    },
                    function(){
                            jQuery(this).animate({
                                    opacity: 1
                            }, 600);
                    });
            }
    also another tip is you can specify more than one CSS property in your case like.
    Code:
    jQuery('.lawnImages').css({
      'opacity': '0.4',
      'filter': 'alpha(opacity=40)',
      '-moz-opacity': '0.4',
      '-khtml-opacity': '0.4',
    });
    Regards

  • Users who have thanked Iszak for this post:

    snowysweb (07-11-2009)

  • #3
    Regular Coder
    Join Date
    Sep 2008
    Posts
    280
    Thanks
    25
    Thanked 9 Times in 9 Posts
    Good man!


  •  

    Posting Permissions

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