February 22, 2011
jquery.animate background-position doesn't work
Question by ran levi
I’m trying to create a background position change with animation.
but for some reason it’s not working.
<script language="javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<div class="moveme" style="height:80px;width:240px;background-image:url('http://www.google.de/intl/en_com/images/srpr/logo1w.png');background-repeat:no-repeat"></div>
<script language="javascript">
$('.moveme').css("background-position","0px 0px").animate({backgroundPosition:"-100px 10px"});
</script>
ideas?
Answer by Cristy
jQuery doesn’t support this on default.
You can use a plug-in like : http://plugins.jquery.com/project/backgroundPosition-Effect
EDIT:
I was wrong, it works:
$(function() {
$('.moveme').css("backgroundPosition","0px 0px").animate({"backgroundPosition":"-100px 10px"});
});
It works if you type in the address bar, but it seems I can’t make this work on jsfiddle, strange… xD
Answer by Starx
Wrap it inside a
$(document).ready(function() {
$('.moveme').css("backgroundPosition","0px 0px").animate({backgroundPosition:"-100px 10px"});
});
