Animieren, hintergrund-position y in Firefox Jquery

Ich versuche zu animieren, nur die y-position des Hintergrundbildes.

Code funktioniert Super in allen Browsern außer dem Firefox. Ich habe bemerkt, in Vorherige Diskussion, die FF hat ein problem mit background-position-y aber ich will mich nicht um ein plugin genau für diesen Fall.

$(".module").animate({
    "height": 160,
    "background-position-y": cropsize //variable for needed position
}, "slow");

Als Sie beantwortet diese Frage: Immer noch Probleme mit jQuery hintergrund animiert - funktioniert in safari und IE, sonst nichts! ich sollte in der Lage sein zu verwenden der Ebene background-position Eigenschaft, hat aber auch nur gebrochen die animation in anderen Browsern.

$(".module").animate({
    "height": 160,
    "background-position": "0 "+cropsize+"px"
}, "slow");

Vielleicht ist es nur ein syntax-Fehler, die ich bin fehlt, aber ich kann nicht scheinen, um diese arbeiten in FF (Neueste version)

InformationsquelleAutor Gregg B | 2012-05-04
  1. 17

    background-position-x/y ist nicht wirklich ein Teil von jeder beliebigen CSS-spec, seine IE-spezifische CSS Hinzugefügt IE5.5, und später umgesetzt von Webkit.

    Opera und Firefox nicht akzeptieren.

    Die beste Lösung ist die Verwendung der step Methode, mit denen Sie animieren, einfach über alles.

    Hinzufügen ein wenig zu Luka ' s Antwort, die ist etwas falsch, auch wenn die Methode korrekt ist, ist der einfachste Weg, um die step Methode zum animieren von einem beliebigen Wert, und Haken Sie einen Schritt auf es zu, so etwas wie:

    $('elem').animate({
  'border-spacing': -1000
},
{
  step: function(now, fx) {
    $(fx.elem).css("background-position", "0px "+now+"px");
  },
  duration: 5000
});

    Wird das element verpackt sein jQuery-Stil zu akzeptieren jQuery-Methoden, wie css().
    Ich habe border-spacing, aber jede css-Eigenschaft, die keine Auswirkungen auf Ihre Website funktioniert, nur daran denken, einen ersten Wert in deiner CSS-Datei für die css-Eigenschaft verwendet.

    Den step Methode kann auch allein verwendet werden, wenn Sie den fx.start und fx.end-Werte, es Luka nicht mit now+=1 ist ziemlich gleich, die nur mit einem setInterval statt, aber die Idee war, klingen alle gleich.

    GEIGE

    EDIT:

    mit neueren Versionen von jQuery gibt es andere Optionen, wie gut, siehe diese Antwort :

    JQuery Animiert Hintergrund Bild auf der Y-Achse

    • falsch. Ich habe gerade getestet, dass. Sorry.
    • eigentlich bist du falsch! In älteren Versionen von jQuery. vor dem 1.4.etwas, könnten Sie zwei Werte übergeben, die in der animation, die Hintergründe und damit es funktioniert, zumindest etwas. Neuere Versionen von jQuery ist das nicht möglich. Um bestimmte Werte in der background-position, background-attachment festgelegt werden, zu festen, aber du hast Recht, es sollte nicht sein ein Problem hier. Ich kann auch den hintergrund Rücken, die in Firefox mit nur eine regelmäßige animation, die aber nur in der X-Richtung, Verschiebung in Y-Richtung zu verlangen scheint mit der Schritt-Methode, so Luka hat die beste Antwort bisher.
    • Okay, ich glaube, du hast in gewisser Weise Recht. Auf dieses: jsfiddle.net/JMC_Creative/nAXdd ich habe die version von jquery 1.4 und es nicht akzeptieren beide Werte. Die beiden sind es nur animiert, die X -, während Sie einfach springt zu der Y-Koordinaten.
    • Ja, es gibt einige unheimliche Begegnungen Los.
    • Genial, das sieht aus wie es werde es tun. Markieren Sie antwortete, sobald ich es umgesetzt. Vielen Dank an Euch beide für die Vermischung dieses aus.
    • Dass willkürliche Wert war der eigentliche Schlüssel. Wie zufällig ist. Nochmals vielen Dank.
    • Gute Arbeit, mein code-Beispiel nicht funktioniert. Ich werde es Bearbeiten. Danke.
    • Und deine Antwort ist mehr komplette und Gründliche, und auch die Tatsache, dass Sie können verwenden Dauer zu vermeiden, Angabe der definitiven Schritt der animation in das erste argument.

    InformationsquelleAutor adeneo
  2. 3

    Den firefox nicht versteht, die background-position-mit jquery animieren, aber firefox akzeptiert css3 animieren.

    Code:

      if ($.browser.mozilla) {      
     $('.tag').css({
               'background-position': 'center 0px',
               '-moz-transition': 'all 1500ms ease'
     })
  } else {
     $('.tag').animate({
               'background-position-y': 0
     }, 1500);
  }
    InformationsquelleAutor Gustavo S. Rodrigues
  3. 2

    Sieht es aus wie jquery animieren dauert nur eine background-Eigenschaft, nicht beide. Sie können entweder mit Prozentangaben oder Pixeln, die beide in Ordnung sind. Aber was ich sagen kann, es ist nicht ein Weg, um anzugeben, nur in x-oder y-Koordinaten. Hoffentlich kann jemand beweisen mich nicht falsch, aber das ist, was diese Geige scheint zu zeigen:

    http://jsfiddle.net/JMC_Creative/dPjSz/

    Auch, egal, was background-position Werte, die Sie in css, das jquery-Animationen scheint immer zu Beginn von "0 50%". Hmmm...

    • Richtig, Sie haben stolperte über die gleiche Verrücktheit, die ich habe finden. Ich kann animieren background-position-y nur, wenn ich nicht über firefox, aber wenn ich ein x-Wert und ignoriert den y-Wert. Gründlich verwirrt.
    • Nur zur info, background-position-y nicht ein real css-Regel, das ist nur ein IE-spezifisches doodad.
    • Aber es unterstützt Webkit, so hast du Recht, aber es SOLLTE unterstützt werden, beause es ist toll, haha
    InformationsquelleAutor JakeParis
  4. 1

    Schritt parameter:

      $("item").animate({
           opacity:1,
       }, 
      step: function(now, fx){ 
          $(fx.elem).css("background-position","0px "+now+"px");
          now+=1;
      }
});

    Aus der jQuery-Dokumentation: http://api.jquery.com/animate/#step

    • Werde diese mal versuchen. Werde berichten, wenn ich eine zweite.
    • Es scheint nicht zu funktionieren: jsfiddle.net/JMC_Creative/nAXdd/2 ... Vielleicht habe ich es falsch umgesetzt.
    InformationsquelleAutor Luka Ramishvili
  5. 0
    $initElement.addClass(initClass).animate(
            {height:[0, 'easeInCirc'], top:  ['+=' + initHeight, 'easeInCirc'] , borderSpacing:[initHeight,'easeInCirc']}, 
            {step: function(now, fx) {
                $initElement.css({"background-position" : "0px -"+now+"px"}
                )},
            },
            {duration: time4design, queue:false},
            function(){ $initElement.removeClass(initClass)});
    InformationsquelleAutor Amin
  6. 0
    var x = 0; var y = 0;
window.setInterval(function() {
    $(".layer").css("background-position", x + "px " + y + "px");
    x++; y--;
}, 50);

    Das war einfach 🙂 Quelle mit Beispiel bei http://makeasite.ru/blog/animate-background-position-firefox.html

    InformationsquelleAutor Boyko Alexander
  7. -1

    background-position animation wird nur die Arbeit mit jQuery 1.5.2 oder unten

    InformationsquelleAutor Sujith Kumar KS
  8. -1

    in jQuery zu animieren background-position-x oder y wie diese: 

    $(selector).animate({ 
                       backgroundPositionY: amountToAnimate 
                    }, duration);

    Wobei die Idee, dass in javascript die - - Charakter ist ein reservierter operator außerhalb von strings. die jQuery nutzt camelcase, dies zu umgehen.

    • First off, können Sie mit - in-Objekt-Schlüssel. var x = {"einige-Sachen": "weee"}; x["some-stuff"] // weee-Zweitens, die gesamte Frage besteht, weil das tun, was deine Antwort vermuten lässt, funktioniert nicht.
    InformationsquelleAutor Codrin Eugeniu
Schreibe einen Kommentar