I have this code for a hover effect, it was working, but now won't. jQuery is working, but events from jquery aren't...

$(document).ready(function () {
            $("#logoimg").hover(function () {
                $("#logoimg").attr("src", "Media/imgover.png");
                $("#logoimg").animate({ width: 420 }, 300);
            }, function () {
                $("#logoimg").attr("src", "Media/imgout.png");
                $("#logoimg").animate({ width: 400 }, 300);
            });
        });

Recommended Answers

All 3 Replies

Not much to go on, short off the fact you want some image to be swapped and animate the width when the mouse is over. Please put up a link or more code.

I have tried the below code and it works fine.

<img id="logoimg" src="4.gif" width="50">
<script>
 $(document).ready(function () {
            $("#logoimg").hover(function () {
                $("#logoimg").attr("src", "4-roll.gif");
                $("#logoimg").animate({ width: 220 }, 300);
            }, function () {
                $("#logoimg").attr("src", "4.gif");
                $("#logoimg").animate({ width: 50 }, 300);
            });
        });
</script>

Eternity,

First, the code will simplify to :

$(document).ready(function () {
	$("#logoimg").hover(
		function () {
			$(this).attr("src", "Media/imgover.png").animate({ width: 420 }, 300);
		}, 
		function () {
			$(this).attr("src", "Media/imgout.png").animate({ width: 400 }, 300);
	});
});

Secondly, did it work locally then stop working after FTPing to a remote host?

If so then look to see if the "Media" directory became "media". FTP clients can, depending on settings, convert file names and directory names to lower case.

If that's ok, then I would suspect that some other piece of javascript/jquery is hijacking the "mouseenter" and "mouseleave" events.

If you're really unlucky then you're a victim of unwanted bubbling, which can be difficult to track down and even harder to cure.

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.