Gespeicherte Jquery-Effekte/Objekte in Variable speichern und abrufen

Ich möchte JQuery-Effekte dynamisch ändern, indem ich die verketteten Objekte in einer Variablen speichern und später mit dem Selektor verketten, so dass ich den letzten erforderlichen Effekt habe, wenn es exec ausführen muss. Ich speichere einen vordefinierten Satz von jQuery-Ketteneffekten - fadeOut(). End(). Next(). FadeIn() - im Daten-Effekt attr, der sich ändern kann, also muss ich darauf über eine Variable verweisen Fügen Sie die Effekte zu $ (contentDiv) Selektor hinzu. So etwas wie; $ (Selektor) -Effekt, wird nicht funktionieren.Gespeicherte Jquery-Effekte/Objekte in Variable speichern und abrufen

var effects = document.getElementById('effect').getAtttribute('data-effect'); 
$(contentsDiv).effects;

Quelle

2016-06-16 Geraldo Isaaks

In Ihrem Fall eine Klärung Ihrer Frage würde helfen, mehr als eine Prämie Hinzufügen – Aides

Was Sie mit '$ (Selektor) bedeuten können' ist es ein Auswahlfeld oder einfach nur ein Container, die Daten angezeigt werden? – rhavendc

darüber Wie (aktualisiert):

var effect = "fadeOut.end.next.fadeIn"; 
var $obj = $(contentsDiv); 
$.each(effect.split('.'), 
    function(key, value) { 
     $obj = $obj[value](); 
    });

Quelle

2016-06-20 12:55:11 Norman

Hallo @Norman, PLZ, werfen Sie einen Blick auf meine aktualisierte Frage. –

Ich habe den Code aktualisiert, um eine Effektkette anzuwenden. Vielleicht kommt das dem, was du brauchst, näher. – Norman

Ich bin mir nicht sicher, ich verstehe, was Sie hier meinen. Was Ihr Code tut, ist, nach einer unspezifischen Methode für das jQuery-Objekt namens effects zu suchen.

Wenn Sie meinen, dass Sie den Inhalt des Attributs "Daten-Effekts gespeichert werden sollen und dann die später auf ein anderes Element anwenden, können Sie das wie folgt tun:

var effects = $('#effect').attr('data-effect'); 
$(contentsDiv).attr('data-effect', effects);

Quelle

2016-06-16 14:46:26

Hi @Johnathan, nein, ich speichere einen vordefinierten Satz von jQuery-Ketteneffekten im Dateneffekt attr, der sich ändern kann, also muss ich über eine Variable darauf verweisen, um die Effekte zu $ (contentDiv) selector hinzuzufügen. –

Sie .data() eine Funktion zum speichern in einem jQuery-Objekt verwenden kann; Function.prototype.call() zum Aufrufen der gespeicherten Funktion mit this auf jQuery() Objekt mit Selektorparameter contentsDiv.

Sie können auch .promise(), .then() verwenden, um zusätzliche Funktionen aufzurufen, wenn alle Animationen jedes Elements, die an die Effektfunktion übergeben wurden, abgeschlossen wurden.

function fx() { 
 
    // `.contents .a`: `contentsDiv` 
 
    console.log(this); 
 
    return this.fadeOut(1000).promise().then(function() { 
 
    return $(this).next().fadeIn(1000).promise().then(function() { 
 
     // `.contents .b`: `.nextElementSibling of `.contents .a` 
 
     console.log(this); 
 
    }); 
 
    }); 
 
} 
 

 
var effects = $("#effects").data("effect", fx); 
 

 
var contentsDiv = ".contents .a"; 
 
// pass jQuery object as first parameter to `.call()` 
 
// to set `this` within `fx` function at `$("#effects").data().effect` 
 
effects.data().effect.call($(contentsDiv)) 
 
.then(function() { 
 
    console.log("effects complete") 
 
});

.b { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<div id="effects"></div> 
 
<div class="contents">contents<br> 
 
<div class="a">a</div> 
 
    <div class="b">b</div> 
 
</div>

Quelle

2016-06-23 02:30:10 guest271314

Ich weiß nicht, welche Auswirkungen Sie wollen. Aber Sie können Jquery-Effekt verwenden https://api.jqueryui.com/category/effects/ Bitte sehen Sie sich meinen Code, den ich erstellt habe. Ich habe Array-Shift und drücken, um die Effekte mit dem Daten-Attribut zu wiederholen, die Sie verwendet haben. https://jsfiddle.net/amitabhjoshi04/zgqt9qzz/4/

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
<script> 
// https://api.jqueryui.com/category/effects/ 

$(document).ready(function(){ 
    $("#btn1").click(function(){ 
     var current = $('#btn1').attr('data-effect'); 
     var ary = current.split('.'); 
     if(ary[0]!='clip' && ary[0]!='fade') 
      $("#box").effect(ary[0]); 
     else{ 
      $("#box").toggle(ary[0]); 
      $("#box").toggle(ary[0]); 
     } 
     ary.push(ary.shift()); 
     var newstring = ary.join('.'); 

     $('#btn1').attr('data-effect',newstring); 
    }); 
}); 
</script> 
</head> 
<body> 

<button id="btn1" data-effect="bounce.slide.clip.fade">Animate</button> 

<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div> 

</body> 
</html>

Quelle

2016-06-26 17:43:52 Softbyte

Hallo @Softbyte, das gefällt mir. Ich möchte jedoch den Effekt sequentiell und einige mit Eigenschaften ausführen. Gibt es eine Chance, dass du deine Antwort damit aktualisieren kannst? –

Hallo @GeraldoIsaaks, ich habe einige Änderungen am Code vorgenommen. Bitte überprüfen Sie die Feed-URL: https://jsfiddle.net/amitabhjoshi04/zgqt9qzz/5/, wenn Sie nach den gleichen oder irgendwelchen Änderungen suchen, die Sie brauchen? Ich habe setInterval hinzugefügt. – Softbyte

Gespeicherte Jquery-Effekte/Objekte in Variable speichern und abrufen

Antwort

Verwandte Themen