My developer is having trouble creating a smooth and efficient transition on this page . Please roll over the logo "Clockrun" and notice how the text changes once fully visible (especially in Chrome) and how quirky the roll over affect is when rolling off and on the logo.
here is the jQuery being used. Is there a better way of doing this so the transition fades in and out much more smoothly?
jQuery(document).ready(function(){
jQuery(".super_featured_desc").css("opacity",0);
jQuery(".super_featured_logo").each(function(){
jQuery(this).hover(
function () {
jQuery(this).children(".super_featured_desc").css("display","block");
jQuery(this).children(".super_featured_desc").animate({"opacity": 1}, 400);
},
function () {
jQuery(this).children(".super_featured_desc").css("display","none");
jQuery(this).children(".super_featured_desc").animate({"opacity": 0}, 400);
}
)
});
});
</script>
Please try using stop:
.stop(true, true)
API: http://api.jquery.com/stop/
or look in here effects
http://docs.jquery.com/Effects you can add show with slow
effect.
If you can flick me jsfiddle I can make it for you, hope this will help :)
code
jQuery(document).ready(function(){
jQuery(".super_featured_desc").css("opacity",0);
jQuery(".super_featured_logo").each(function(){
jQuery(this).hover(
function () {
jQuery(this).children(".super_featured_desc").css("display","block");
jQuery(this).children(".super_featured_desc").stop(true, true) .animate({"opacity": 1}, 400);
},
function () {
jQuery(this).children(".super_featured_desc").css("display","none");
jQuery(this).children(".super_featured_desc").stop(true, true) .animate({"opacity": 0}, 400);
}
)
});
});
To achieve a gradual fade on mouseout
use a callback on the mouseout animation and insert your jQuery(this).children(".super_featured_desc").css("display","none");
there:
jQuery(document).ready(function(){
jQuery(".super_featured_desc").css("opacity",0);
jQuery(".super_featured_logo").each(function(){
jQuery(this).hover(
function () {
jQuery(this).children(".super_featured_desc").css("display","block");
jQuery(this).children(".super_featured_desc").stop(true, true) .animate({"opacity": 1}, 400);
},
function () {
jQuery(this).children(".super_featured_desc").stop(true, true) .animate({"opacity": 0}, 400, function(){
jQuery(this).css("display","none");
});
}
)
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.