Анимация фонового положения не работает

Я хочу анимировать фоновое положение, но не работает. Возможно ли это, чтобы оживить этотАнимация фонового положения не работает

<head> 
    <style> 
     .test{ background:#F00} 
    </style> 
    <script type="text/javascript" src="jquery-1.8.3.js"></script> 
    <script type="text/javascript"> 
     $(function(){ 
      $('a').click(function(){ 
       $(this).animate({backgroundPosition:'-50px 10px'}, 200); 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <a href="javascript:void(0)">click</a> 
    <div>check....</div> 
</body>

источник

2013-05-27 Carlos

Возможный дубликат [анимация backgroundPosition] (http://stackoverflow.com/questions/6380904/animate-backgroundposition) –

Используете ли вы какой-либо плагин? –

Для того, что стоит, GSAP может справиться с этим для вас либо в его автономной форме, либо вы можете загрузить его плагин jQuery, и ваш код выше будет работать нормально (никаких специальных исправлений не требуется, потому что модные ножки выполняются под капотом, в том числе совместимость со старыми вкусы IE). http://www.greensock.com/gsap-js/ – Jack

Если вы проверяете jQuery animate page вы можете прочитать, что:

Animate

Все анимационные свойства s hould быть анимированным до единственного числового значения, за исключением случаев, указанных ниже; большинство свойств, которые не являются числовыми, не могут быть анимированы с использованием базовой функциональности jQuery (например, ширина, высота или левый могут быть анимированы, но фоновый цвет не может быть, если не используется плагин jQuery.Color()).

Это, как указано, используется в качестве фона для использования 2 значения. Решение состоит в объединении значения.

Вот как *:

$(this).animate({ 
    'background-position-x' : '-50px', 
    'background-position-y' : '10px' 
}, 200);

* Я, возможно, перевернутый ваши 2 значения, я не помню, которым один x и Wich один является y.

EDIT

С светлячками поддержки оленьей кожей background-position-x и y, вот кодом, чтобы исправить:

var pos = {x : '', y : ''}; 
$('a').click(function(){ 
    var that = $(this); 
    that.animate({ 
     'background-position-x' : '-50px', 
     'background-position-y' : '10px' 
    },{ 
     duration : 200, 
     step : function(a,b){ 
     if(b.prop == "backgroundPositionX"){ 
      pos.x = a + b.unit 
     }else if(b.prop == "backgroundPositionY"){ 
      pos.y = a + b.unit 
     } 
     }, 
     progress : function(){ 
     that.css('background-position', pos.x + ' ' + pos.y); 
     } 
    }); 
});

источник

2013-05-27 13:53:21

Он не работает над mozilla – Carlos

Да, firefox не поддерживает его, но я исправил его, взгляните! –

Привет, он вообще не работает в firefox. Но я хочу, чтобы теперь использовался .unit и какое значение он даст – Carlos

Working jsFiddle Demo

Я думаю, что Jquery не может оживить background-position. Одним из решений, использует переход в CSS:

a { 
    -webkit-transition: background-position 0.6s; 
    -moz-transition: background-position 0.6s; 
    -ms-transition:  background-position 0.6s; 
    -o-transition:  background-position 0.6s; 
    transition:   background-position 0.6s; 
}

И просто изменить background-position в JQuery с .css() методом:

$(function(){ 
    $('a').click(function(){ 
     $(this).css('background-position', '250px 250px'); 
    }); 
});

источник

2013-05-27 13:53:11

Я забыл, где я наткнулся на это, но здесь немного мопса в том, что делает трюк довольно красиво:

(function($){$.extend($.fx.step,{backgroundPosition:function(c){if(c.state===0&&typeof c.end=='string'){var d=$.curCSS(c.elem,'backgroundPosition');d=toArray(d);c.start=[d[0],d[2]];var e=toArray(c.end);c.end=[e[0],e[2]];c.unit=[e[1],e[3]]}var f=[];f[0]=((c.end[0]-c.start[0])*c.pos)+c.start[0]+c.unit[0];f[1]=((c.end[1]-c.start[1])*c.pos)+c.start[1]+c.unit[1];c.elem.style.backgroundPosition=f[0]+' '+f[1];function toArray(a){a=a.replace(/left|top/g,'0px');a=a.replace(/right|bottom/g,'100%');a=a.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");var b=a.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);return[parseFloat(b[1],10),b[2],parseFloat(b[3],10),b[4]]}}})})(jQuery);

И в использовании:

$(function(){ 
    $('a').click(function(){ 
     $(this).animate({backgroundPosition: "(-50px 10px)"}, 200); 
    }); 
});

источник

2013-05-27 19:05:22 faino

Анимация фонового положения не работает

ответ

Смежные вопросы