Solved

Trouble with jquery image link hover popup flickering

Posted on 2010-09-15
2
786 Views
Last Modified: 2012-05-10
I have a jquery function that shows a larger image in a jquery popup when the user hovers over the image link.

in this example: http://www.armtech.us/clients/purrWholesale/products.php?categoryId=10  hover over "Alpine" and you can see the issue.

This is the code:

            
      $(function(evt) {
        $("a:has(img.productsImg)").hover(
            function() {
                        var largePath = $(this).attr("title");
                        var offset = $("#container").offset();
                  
                        $("#photo_large").attr({ src: largePath });
                $("#tooltip1").css("top", offset.top).css("left", offset.left).css("display", "block");
                $("#tooltip1").animate({ opacity: 1.0 }, 300);
            },
            function() {
                $("#tooltip1").animate({ opacity: 0.0 }, 300, function() {
                    $("#tooltip1").css("display", "none");
                });
            }
        );
    });


and the   tooltip:
<div class="tooltipContent" id="tooltip1">
        <img src="" id="photo_large" /></div>
0
Comment
Question by:JGoyer
2 Comments
 
LVL 22

Accepted Solution

by:
kadaba earned 500 total points
ID: 33683417
try this way.

$(function(evt) {
        $("a:has(img.productsImg)").hover(
		function() {
				var largePath = $(this).attr("title");
				var offset = $("#container").offset();
			
				$("#photo_large").attr({ src: largePath });
                $("#tooltip1").css("top", offset.top).css("left", offset.left).css("display", "block");
                $("#tooltip1").animate({ opacity: 1.0 }, 300);
            }
        );
		$("#tooltip1").mouseout(function() {
			$("#tooltip1").animate({ opacity: 0.0 }, 300, function() {
				$("#tooltip1").css("display", "none");
			});
		});
    });

Open in new window

0
 
LVL 2

Author Closing Comment

by:JGoyer
ID: 33708739
Perfect!  Thanks!
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question