• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 75
  • Last Modified:

animated divs or table rows

Hi,

say for eg: If I have some HTML that has divs or rows. Is it possible to animate them so that they slide upward continuously at a defined speed?

What I want to do is post some announcements into a div and have them slide on the webpage for an animated effect.

Please help...
0
Techsavy
Asked:
Techsavy
  • 4
  • 3
1 Solution
 
selvolCommented:
Of course.  Jquery as you may know offers this as an option.

http://api.jquery.com/animate/

You can always DL the UI and play with the code here.

http://jqueryui.com/download/

Selvol
0
 
GaryCommented:
0
 
TechsavyAuthor Commented:
Hi Gary,

Your solution is very close but it is not very animated i.e it pauses and moves up but I am looking for more smooth and continuous moment. It needs to slow down a little bit.

Please help..
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
GaryCommented:
Just wanted to know if that was what you were looking for
Will put something together

Whats your actual markup?
0
 
GaryCommented:
There will be a slight pause as it restarts the cycle

http://jsfiddle.net/uw9Ltx1d/8/

rowHeight = $("ul li").outerHeight();

ticker = " ul li";

children = $("div ul li").length;

$("div").append($("div").html())

var scroller = function () {
    $("ul:first").animate({
        marginTop: "-" + (children * rowHeight) + "px"
    }, 5000, function () {
        $("ul:first").insertAfter($("ul:last")).css("margin-top", 0);
        scroller()
    })
}

scroller()

Open in new window

0
 
TechsavyAuthor Commented:
Hi Gary,

This code is not working when I put it on a SharePoint page. basically there will be other divs and ul and li elements. we have to make it much more smarter
0
 
GaryCommented:
Well you have to specify the class or ID of the UL - it won't work as it is if you just put in a page with other ul's in it.
0
 
TechsavyAuthor Commented:
Good solution!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now