动态加载内容的动画效果 - jQuery

Question

$(function() {
 $("a").hover(
  function() {
   $(this).animate({color: "blue"}, 400);
  }, function() {
   $(this).animate({color: "white"}, 400);
 })
 $(".left").fadeOut("slow").load("created.php").fadeIn("slow");
})

我希望来自created.php 页面的链接（a's）具有悬停效果。我该怎么做呢？

Answer 1

使用 live 绑定处理程序。这样，页面中加载的任何新“a”也将获得悬停效果。

$(function() {
     $("a").live(
     { mouseenter: function() {
             $(this).animate({color: "blue"}, 400);
          }, 
       mouseleave: function() {
            $(this).animate({color: "white"}, 400);
          }
     })
     $(".left").fadeOut("slow").load("created.php").fadeIn("slow");
});

注意：对于live，hover仅需要一个处理程序。另一种方法是指定 mouseenter 和 mouseleave 处理程序。

Answer 2

您想要使用 jquery live 方法。

 $("a").live( {mouseover: function() {
    // do something on mouseover
  },
mouseout: function() {
    // do something on mouseout
  }
});