jQuery not rendering properly

问题

I'm using this jQuery to render a text box onClick. But, It's not rendering... Also, on a side note I'm using Drupal 7. I have the jQuery in the Head tags of the html.php.

 <script type="text/javascript">

  $(document).ready(function() {

    $("#front-background").hide();

        $(window).load(function() {

            $('#links-top-1').hover(function() {

                $('#front-background').fadeIn(2000);

            });

        });

  });

  </script>

回答1:

This may also be because of how Drupal handles compatibility with other JavaScript libraries.

You can wrap your jQuery function in:

(function ($) {
    //your existing code
})(jQuery);

or if you're comfortable theming using the template.php file, you can add the JS through the function drupal_add_js().

See http://drupal.org/node/171213 for more details.

回答2:

You dont need window load event if you are already using $(document).ready method. Try this.

$(document).ready(function() {

    $("#front-background").hide();

    $('#links-top-1').hover(function() {
       $('#front-background').fadeIn(2000);
    });

});

回答3:

I didn't see any onClick functionality there. This should work:

CSS:

#front-background {
    display:none;
}

JQuery hover replacement. Fade in on hover, fadeout on leave

$(function() {
   $('#links-top-1').hover(function() {
      $('#front-background').fadeIn(2000);
   },function(){
      $('#front-background').fadeOut(2000)
   });
});

来源：https://stackoverflow.com/questions/7005661/jquery-not-rendering-properly

标签

javascript

jquery

drupal-7