Question

所以我有这个jQuery代码，并想知道用户是否点击页面上的任何元素，这个代码会反转，这会是什么触发器？

$("#cia").click(function() {
$("#re").animate({
  "margin-top": "104px"
}, 800);
$("#r").animate({
  "margin-top": "104px"
}, 800);
});

Answer 1

不是jQuery函数，但有两种状态（默认和反向）可以解决问题。

$("#cia").click(function() {
var re = ( document.getElementById('re').style.marginTop > 104 ) ? 104 : 000;
var r = ( document.getElementById('r').style.marginTop > 104 ) ? 104 : 000;    
$("#re").animate({
  "margin-top": re + "px"
}, 800);
$("#r").animate({
  "margin-top": r + "px"
}, 800);
});

用反转值替换000。如果倒数小于104，则翻转＆gt;

的方向

Answer 2

您可以使用document.click()实现此目的，以便每次点击都会触发动画反转：

$(document).click(function() {
    $("#re").animate({
      "margin-top": "0px"
    }, 800);
    $("#r").animate({
      "margin-top": "0px"
    }, 800);
});

但是，请务必在初始点击事件中加入stopPropagation()，否则会在此触发document.click()（并且您的动画会向下和向下翻转所有内容点击一下）：

$("#cia").click(function(e) {
    e.stopPropagation();
    $("#re").animate({
      "margin-top": "104px"
    }, 800);
    $("#r").animate({
      "margin-top": "104px"
    }, 800);
});

jsFiddle example here

jQuery反向.animate和触发器？

2 个答案: