Home/ Questions/Q 6631129
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T22:30:12+00:00

I am trying to add this jQuery Hover effect to my site. Instead of

  • 0

I am trying to add this jQuery Hover effect to my site. Instead of downloading jQuery I decided to use Google Libraries API for jQuery. I got a key and copied the code that goes to the header then I copied the jQuery for the hover effect but nothing is happenning. What am I doing wrong? This is where my test page is and below is the complete code and the handler:

class JQueryTest(webapp.RequestHandler):
    def get(self):
        self.response.out.write("""<html>""")
        self.response.out.write("""<head>""")
        self.response.out.write("""<script type="text/javascript" src="https://www.google.com/jsapi?key=GOOGLE LIBRARIES API KEY"></script>""")

        self.response.out.write("""<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

$("ul.thumb li").hover(function() {
    $(this).css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ 
    $(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
        .animate({
            marginTop: '-110px', /* The next 4 lines will vertically align this image */ 
            marginLeft: '-110px',
            top: '50%',
            left: '50%',
            width: '174px', /* Set new width */
            height: '174px', /* Set new height */
            padding: '20px'
        }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */

    } , function() {
    $(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
    $(this).find('img').removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/
        .animate({
    marginTop: '0', /* Set alignment back to default */
            marginLeft: '0',
            top: '0',
            left: '0',
            width: '100px', /* Set width back to default */
            height: '100px', /* Set height back to default */
            padding: '5px'
        }, 400);
});
 </script>""")

        self.response.out.write("""<link type="text/css" rel="stylesheet" 
                                    href="/stylesheets/jquery.css" /> """)
        self.response.out.write("""<title>JQuery Test</title>""")
        self.response.out.write("</head>")
        self.response.out.write("""<body>""")
        self.response.out.write("""<div class="content">""")

        self.response.out.write("""
        <ul class="thumb">
        <li><a href="#"><img src="http://ting-1.appspot.com/image?img_id=agZ0aW5nLTFyEAsSCEhvbWVQYWdlGIfcCww" alt="" /></a></li>
        <li><a href="#"><img src="http://ting-1.appspot.com/image?img_id=agZ0aW5nLTFyEAsSCEhvbWVQYWdlGIyGCww" alt="" /></a></li>
        <li><a href="#"><img src="http://ting-1.appspot.com/image?img_id=agZ0aW5nLTFyEAsSCEhvbWVQYWdlGIm1Cww" alt="" /></a></li>
        <li><a href="#"><img src="http://ting-1.appspot.com/image?img_id=agZ0aW5nLTFyEAsSCEhvbWVQYWdlGM-dCww" alt="" /></a></li>
        <li><a href="#"><img src="http://ting-1.appspot.com/image?img_id=agZ0aW5nLTFyEAsSCEhvbWVQYWdlGM6dCww" alt="" /></a></li>
        <li><a href="#"><img src="http://ting-1.appspot.com/image?img_id=agZ0aW5nLTFyEAsSCEhvbWVQYWdlGIuGCww" alt="" /></a></li>
        <li><a href="#"><img src="http://ting-1.appspot.com/image?img_id=agZ0aW5nLTFyEAsSCEhvbWVQYWdlGLrzCww" alt="" /></a></li>
        <li><a href="#"><img src="http://ting-1.appspot.com/image?img_id=agZ0aW5nLTFyEAsSCEhvbWVQYWdlGLWlCww" alt="" /></a></li>
        <li><a href="#"><img src="http://ting-1.appspot.com/image?img_id=agZ0aW5nLTFyEAsSCEhvbWVQYWdlGLWlCww" alt="" /></a></li>
        </ul>""")

        self.response.out.write("""</div>""")
        self.response.out.write("</body></html>")
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re not wrapping your jQuery code in $(document).ready(), so the DOM doesn’t exist yet at the time you’re trying to attach the handlers. In general, any time you need to reference DOM elements in the page (as opposed to just defining functions to be called later), you have to wrap it all in a .ready() callback so that it won’t run until the DOM is completely loaded. Try this:

    $(function() {
    $("ul.thumb li").hover(function() {
            // ...
        }, function() {
            // ...
        });
});

    That should work – it does here: http://jsfiddle.net/nrabinowitz/gdsxH/1/

    • 0