jQuery trigger not working

Question

I'm trying to create a transition effect (from bottom to top) on a title, immediately after the page loads, but I can't figure out why it's not working.

HTML:

<div class="portfolio-title-wrap animate">
    <div class="portfolio-title">Rooftop Garden </div>
    <div class="location">San Francisco, CA</div>
</div>

CSS:

.animate {
background-color: #c00;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: absolute;
top: 100%;
right: 0;
}

.animate.move {
top: 0%;
margin-top: -700px;
}

.portfolio-title {
color: #F8941F;
font-weight:bold;
}

jQuery:

jQuery('.animate').trigger(
function() {
$(this).addClass("move");
});

Demo: Fiddle

Answer 1

For .trigger() to work, you need to pass it an event type. This will then execute all handlers that were attached for the given event type. For example:

$('.animate').bind('move-event', function () { // handler will fire when 'move-event' is triggered
  $(this).addClass("move");        
});

$('.animate').trigger('move-event');

DEMO.

​If you just want to add the class move on page load, no need to use trigger at all, just add the class:

$(document).ready(function () {
  $(".animate").addClass("move"); 
});