Question

我希望通过将链接对象存储在变量中并稍后连接到选择器来动态更改jquery效果，以便在需要执行时获得最新的必需效果。我存储了一组预先设定的jquery链式效果--fadeOut（）。end（）。next（）。fadeIn（） - 在数据效果attr中，可以改变，所以我需要通过一个变量来引用它来添加$（contentDiv）选择器的效果。所以像; $（选择器）效果，将无效。

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

Answer 1

这个（更新）：

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

Answer 2

我不确定我明白你的意思。您的代码所做的是在名为effects的jQuery对象上寻找未指定的方法。

如果您想要存储属性“数据效果”的内容，然后将其应用于其他元素，您可以这样做：

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

Answer 3

您可以使用.data()在jQuery对象中存储函数; Function.prototype.call()调用存储的函数，this设置为jQuery()具有选择器参数contentsDiv的对象。

当传递给效果函数的每个元素的所有动画都已完成时，您还可以使用.promise()，.then()来调用其他函数。

＆＃13;

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")
});

＆＃13;

.b {
  display:none;
}

＆＃13;

<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>

＆＃13;

Answer 4

我不知道你想要什么效果。但你可以使用Jquery效果https://api.jqueryui.com/category/effects/ 请查看我创建的代码。我使用数组移位并使用您使用的数据属性来重复效果。 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>

在变量

4 个答案: