Question

我真的想首先进入jQuery。

我有一个网站即时制作，点击它上面的气球浮起然后转到目标页面。然而，他们似乎互相攻击。

<script type="text/javascript">
$(document).ready(function(){
    $("a.balloon-nav").click(function(event){
        var target = $(this).attr("href");
        var zIndex = $(this).css("z-index");
        $(this).attr("href", "#").css("z-index", "100");
        $(this).animate({ top: "-500px" }, 1000, function() {
              $(this).css("z-index", zIndex);
              window.location=target;
              alert("foo");
          });
    });
});
</script>

我也想知道“事件”的使用以及“传播”的含义。

Answer 1

尝试使用：

$(this).animate({ top: "-500px" }, 1000, '', function() { // ...

Definition：

动画（params，[duration]，[easing]，[callback]）

关于event，read here。取自那里：

jQuery的事件系统根据W3C标准规范化事件对象

event.stopPropagation()通常用于避免向父元素触发事件。

例如，如果你有

<p> UH
   <p> Something </p>
</p>

并且您执行类似$('p').click(function() { //magic stuff } );的操作，如果您碰巧点击包含“Something”的<p>，那么神奇的东西会闪两次！

所以，如果你这样做

//bind click event on all 'p's
$('p').click(
    function(myEvent) { 
       //magic stuff 
       alert($(this).text());
       myEvent.stopPropagation();
    } 
);

无论何时单击<p>，它都会确保仅在该元素上触发，而不是在父母身上触发。

UPDATE ：如果多次使用，建议始终存储jquery元素。在您的情况下，您使用了大量$(this).something()来检索/设置值或调用函数尝试将其存储为：

var $this = $(this);   //stored it in variable
var someData = $this.something();
$this.functionNeeded(...);

Answer 2

我也想知道“事件”的使用以及“传播”的含义。

当您单击HTML页面中显示的文本时，该事件（可以被解释为关于页面中发生的事情的信息）被传播（或发送）到事件发生的元素的父元素，并且然后到父元素，直到到达windows对象。每个元素都可以对事件做出反应，并拥有一个执行的处理程序。这就是为什么jQuery中的事件处理程序有一个目标参数，它告诉事件处理程序，它是发起事件的元素。

用jQuery移动气球

2 个答案: