Question

I am trying to add a jQuery animation into my WordPress posts.

The animation works fine, but what is hard is how to do it for each individual post. Meaning, each post is assigned a separate ID (e.g. post-xxxx) and the only way of knowing the post ID (that I know of) is through WordPress’ the_ID() function.

I have my jQuery running in script tags in the index PHP file. How would I go about doing this? My only good idea was to add an onclick HTML listener to the DIV tag for the post and then use the this reference in the jQuery code but it never executed (not sure if my code was wrong).

Here is the code for that thing I tried:

<script>
    function('test') {
        $(this).animate({
            height: '+=350'
        }, {
            duration: 500
        });

        $('.review-thumb').animate({
            opacity: 0
        }, {
            duration: 500
        });
    },
</script>

With this being my HTML tag:

<div onclick="test" class="post number-<?php echo $number; ?> colour-<?php echo $colour; ?>" id="post-<?php the_ID(); ?>">

The website theme can be found at http://vusavusa.com/blog/?theme=vusavusa2. Please excuse the messiness of content right now.

Answer 1

You can do something like this assuming that all the Posts starts with post- identifier. The selector below will grab all inputs that has an id that starts with post-.

$('input[id^="post-"]').animate({ height: '+=350' }, { duration: 500 });

The concept can be adapted to whatever you’re trying to do such as:

/** Assign an animation to each element */
$('input[id^="post-"]').click(function() {
    $(this).animate({ height: '+=350' }, { duration: 500 });
    return false;
});

Another option is to use slideToggle to animate to expand your Post into a full view. your full view will be preloaded but is hidden by default and will have a class of post-full.

CSS:

.post-full { display: none; }

JS:

$(function() { 
    $('[id^="post-"]').click(function() {
        $(this).find('.post-full').slideToggle(500, function(){});
        return false;
    });
});