Jquery animation isn't initialised on mobile - php

Question

I'm changing the opacity of a class by using the jQuery hover function.
Note : I'm not using the
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
Here is my code:
<script type="text/javascript">
$(document).ready(function(){
$(".thumbnail_image_related_project .transparent_font").css({'opacity' : '0'});
$(".thumbnail_image_related_project").hover(
function(){
$(this).children(".transparent_font").stop().animate({'opacity' : '0.7'}, 300);
},
function(){
$(this).children(".transparent_font").stop().animate({'opacity' : '0'}, 300);
}
);
});
</script>
This code is working perfectly on a laptop but not on a smartphone.
The problem: When I clicked on the element, the animation is working and I'm going to next page. But, when I going back to the previous page, the opacity of the element isn't initialised.
Does some one know why?
Here is my php code:
<a href="http://192.168.0.11/next-page/" title="blabla">
<div class="thumbnail_image_related_project">
<h2 class="transparent_font">Text and the white background</h2>
<div id="image">
<img width="300" height="173" src="http://192.168.0.11/blabla.jpg"/>
</div>
</div>
</a>
here is my css:
.thumbnail_image_related_project .transparent_font{
line-height: 1.25em;
position: absolute;
top: 0;
left: 0;
color: black;
background-color:white;
width: 100%;
height: 100%;
opacity:0;
}

Answer 1

Are you using jQuery or jQuery Mobile? The reason I ask is that on mobile, it is likely a touchstart event not hover. jQuery Mobile may convert touchstart into hover.
Take a look at this: jQuery hover event on tag on mobile devices.