Question

I am creating a jquery animation with lots of effects and responsive to some of users actions but code works fine with firefox and not in ie or chrome here is my code

        (function($) {
            $(document).ready(function() {
                $('#wires').effect("shake", { times:3000,  distance:31  }, 300).css('z-index','-1');
                //$('#wires').css('z-index','-1');
                $('#baccha').css('z-index','99999999999999999999');
                $("#saman1").live('click',function(){
                    alert("s");
                                $('#i1').attr('src','char2.gif');
                                $('#i1').addClass('run');
                                $('#i1').removeClass('stand');
                    });
                $("#bird").live('click',function(){
                                $('#i1').attr('src','char1.gif');
                                $('#i1').addClass('stand');
                                $('#i1').removeClass('run');
                    });
                $('#wires').sparks([ {
                                         number: 10,
                                         speed:  5,
                                         img:    'spark.png'
                                      }]);


                $('#bird')
                    .sprite({
                        fps: 3, 
                        no_of_frames:3,
                        start_at_frame: 1


                    });
                     $('#light')
                    .sprite({
                        fps: 20, 
                        no_of_frames:3,
                        start_at_frame: 1


                    });


            });
        })(jQuery);

    </script>

in IE my wires div is hidden its nowhere I tried blank bg I could not see it and if I put z-index 0 then it will come front of baccha div which hides everything and in chrome my click function is not working I am getting some error resource interupted text/plain thing if you want I will post the error

Answer 1

Try removing the extra comma from these two sections:

    $('#bird').sprite({
        fps: 3,
        no_of_frames: 3,
        start_at_frame: 1, //remove this comma
    }) //put ; here, good practice

    $('#light').sprite({
        fps: 20,
        no_of_frames: 3,
        start_at_frame: 1, //remove this comma
    }) //put ; here, good practice

EDIT1: Missed one section, can you remove the extra comma from this as well and try again?

    $('#wires').effect("shake", {
        times: 3000,
        distance: 31, // remove this comma
    }, 300);

EDIT2: There’s an extra </div> at the end just above the closing body tag. Remove that and try again.

EDIT3: The problem is with your HTML element stack and CSS. Just to make my point, remove the margin-top: -60px from your floor div styling and the click on saman1 works.