Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Trouble with jquery image link hover popup flickering

Posted on 2010-09-15
2
Medium Priority
?
807 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 22

Accepted Solution

by:
kadaba earned 2000 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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses

610 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