淡出iPad上的悬停效果

Question

I tried to use the fadeIn and fadeOut effect as you can see in this page: http://www.lifetime-watches.com/gal-w.html

var titleString = $(this).find('a').attr("title");
$("#title").html(titleString).fadeIn(100);
;

So when they run the script the title of the image would fade in in a div.

But the problem is when this page is opened in iPads, the hover function doesn't work (because obviously they don't have hover) and the div wouldn't fade out.

What are the alternatives to this? Any help is appreciated. Thank you.

Answer 1

The jQuery Hoverable Plugin :

unifies touch and mouse events over different platforms like desktops and mobile devices with touchscreens

That might be a good alternative for your app.

Answer 2

You want to create a second implementation that works with the click event. May be something like this:

$(selector syntax).click(function () { AnimationEffect(this); });
$(selector syntax).mouseenter(function () { AnimationEffect(this); });

function AnimationEffect(TheDiv) {
//your animation goes here, TheDiv is the jquery object
//you can access it like this: $(TheDiv).
}

Answer 3

Have the user click on the watch, then click again to get rid of the info.

This can be accomplished using the .toggle() method: http://api.jquery.com/toggle-event/