Question

I have two JS buttons to rolling up and down as shown in
this sample page.

Now it’s just change the image without effect, I need to apply the slide or the roll effect to make images looks circulating, something like THIS but up and down,

the JS code is dynamically generated from ASP.net Page,
here is the JS for up button,

var my_slots = ['_', 'x', 'y', 'z', '0', '1',
                '2', '3', '4', '5', '6', '7', '8', '9'];


$("#sslot_img0_u").live('click', function() {
    image = document.getElementById('sslot_img' + '0');
    image.setAttribute('src', do_up('0', image.getAttribute('alt')));
    $("#hstring").val(my_slots[2]);
    return false;
});

function do_up(key1, key2) {
    image = document.getElementById('sslot_img' + key1);
    if (Number(key2) == my_slots.length - 1) {
        image.setAttribute('alt', '0');
        $get('sslot_hf' + key1).value = my_slots[0];
        return "http://www.fedne.com/" + my_slots[0] + '.gif';
    } else {
        image.setAttribute('alt', (Number(key2) + 1));
        $get('sslot_hf' + key1).value = my_slots[Number(key2) + 1];
        return "http://www.fedne.com/" + my_slots[Number(key2) + 1] + '.gif';
    }
}

and is it possible to get this effect on the button not the div click event?

Answer 1

What you want is achieved using the jquery animate() function, and tweaking the position attribute of elements. What you are using however is changing the existing value/image. The approach is different.

You might want to Right Click -> Inspect Element on the desired result in Chrome to get a clearer picture.

I hope I got your question right. Apologies if I didn’t.

EDIT – Look into jquery slide() function documentation as well. May be what you need is there.