Solved

Trouble with jquery image link hover popup flickering

Posted on 2010-09-15
2
778 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
Comment Utility
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
Comment Utility
Perfect!  Thanks!
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

by Julian Matz As of jQuery (http://jquery.com/) 1.4 the .live() method (http://api.jquery.com/live/) supports custom events as well as some standard JavaScript events that it previously didn't support. Among these is the submit event. Unlike …
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now