How to add an extra class on element after Ajax load

I need to add a class on after an ajax load. I first give a few elements a class “ready” which initiate a css transition. When the link li#menu-item-318 a gets clicked it removes the ready class which then reverses the css transition and then loads a new html document.

This is where Im stuck. On the Ajaxload I need to set the ready class again on the same classes on the same elements loaded inside the .test container to once again start a CSS transition for the new page a-swell.

Code:

$(function () {
$('.v-line, .h-line, .nav, #ban_image img').addClass('ready');
});


$('li#menu-item-318 a').click(function(e){
 e.preventDefault(); 
 var linkNode = this;
$('.v-line, .h-line, #ban_image img')
 .removeClass('ready')
 .one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
 function(e) {
$(".js-pageTransition").load("photo.html .test> *");                          
});
});


Source: html

Leave a Reply