Animation effects on dynamically loaded content - jQuery

$(function() {
 $("a").hover(
  function() {
   $(this).animate({color: "blue"}, 400);
  }, function() {
   $(this).animate({c开发者_StackOverflow中文版olor: "white"}, 400);
 })
 $(".left").fadeOut("slow").load("created.php").fadeIn("slow");
})

I want the links (a's) from the created.php page to have the hover effect. How can I do it?

---

Use live to bind handlers. That way, any new 'a' loaded in the page will also get the hover effect.

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

Note: With live, hover takes only one handler. Alternative is to specify mouseenter and mouseleave handlers.

---

You want to use the jquery live method.

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